văn bản giữ chỗ cho plugin đã chọn cho một lựa chọn duy nhất không hoạt động

Question

Tôi có plugin được chọn cho một lựa chọn được triển khai trong mã của tôi. Tôi đang cố gắng thêm văn bản Trình giữ chỗ cho các hộp tìm kiếm nhưng tôi không thể. Tôi đã thử những điều sau đây:

<select id="search_pi" name="search_pi" type="text" class="chosen-select" 
     style="width:450px;" onchange="this.form.submit()" > 

    <option value="">Search Project/Initiative...</option> 
    <?php 
    include "../includes/search_dropdown.php"; 
    foreach($proj_ini_Array as $qa){ 
     echo "<option value = \"$qa\">$qa</option>"; 
    } 
    ?> 

JS

<script> 
    $(document).ready(function() { 
    $('.chosen-select').chosen({ 
     placeholder_text_single: "Select an option", 
     no_results_text: "Oops, nothing found!" 
    }); 
    }); 
</script> 

Trong lĩnh vực lựa chọn, tôi cũng đã cố gắng sử dụng data-placeholder="Select an option" nhưng điều đó không giúp quá. Ai đó có thể cho tôi biết tôi đang thiếu gì không?

Xin cảm ơn trước.

Answer 1

OK. Tôi đã tìm ra câu trả lời. Chúng tôi cần có tùy chọn đầu tiên để trống cho văn bản trình giữ chỗ được kích hoạt cho hộp tìm kiếm Chọn duy nhất.

<select id="search_pi" name="search_pi" type="text" class="chosen-select" style="width:450px;" onchange="this.form.submit()" > 

    <option> </option> 
    <?php 
    include "../includes/search_dropdown.php"; 
    foreach($proj_ini_Array as $qa){ 
     echo "<option value = \"$qa\">$qa</option>"; 
    } 
    ?> 

Trong trường hợp trên, văn bản giữ chỗ sẽ mặc định là "Chọn tùy chọn".

Đối với một tùy chỉnh placeholder văn cho một hộp chọn tìm kiếm duy nhất bạn có thể chỉnh sửa file js của bạn như dưới đây và có tùy chọn đầu tiên trống cho các văn bản giữ chỗ sẽ được hiển thị:

<script> 
    $(document).ready(function() { 
    $('.chosen-select').chosen({ 
     placeholder_text_single: "Select Project/Initiative...", 
     no_results_text: "Oops, nothing found!" 
    }); 
    }); 
</script> 

Answer 2

Để thực hiện tùy chọn đầu tiên của bạn chỉ đơn giản là một văn bản hướng dẫn, nhưng không thể cho người dùng để chọn nó, sử dụng này:

<option selected="selected" disabled>Search Project/Initiative...</option> 

* Chỉnh sửa *

Ah xin lỗi, không đọc câu hỏi của bạn

đủ rõ ràng để bắt đầu.

Dường như <option> đầu tiên cần phải trống. Xem this jsfiddle.

Answer 3

sử dụng data-placeholder="YOUR TEXT" trong select tag

Answer 4

Có một giải pháp tốt hơn/dễ dàng hơn cho vấn đề này nếu bạn đang xây dựng qua HTML thay vì JS. Bạn phải làm hai việc.

1. Đầu tiên <option> trong số <select> của bạn phải để trống.
2. Bạn nên bao gồm placeholder="Placeholder goes here" trong số <select> của mình. Rõ ràng điều này đã từng được gọi là data-placeholder, mà tôi nghĩ đã dẫn đến một số nhầm lẫn.

Vì vậy, trong tổng số:

<select placeholder="Placeholder goes here"> 
    <option><!-- Empty option goes here. --><option> 
    <option>Other Option</option> 
</select> 

Answer 5

phản ứng tài @Zack Joerdan giải quyết vấn đề của tôi. Vì vậy, giá trị yêu cầu mùa xuân bên trong tùy chọn

<select placeholder="Placeholder goes here"> 
    <option value=""><!-- Empty option goes here. --><option> 
    <option>Other Option</option> 
</select>