Symbol zastępczy dla wybranej wtyczki dla pojedynczego wyboru nie działa

Question

Mam wybraną wtyczkę do pojedynczego wyboru zaimplementowaną w moim kodzie. Próbuję dodać tekst zastępczy do pól wyszukiwania, ale nie jestem w stanie. Próbowałem następujące rzeczy:

<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> 

W polu wybierz, próbowałem również używając data-placeholder="Select an option" ale to nie pomaga zbyt. Czy ktoś może mi powiedzieć, czego mi brakuje?

Z góry dziękuję.

Answer 1

OK. Dowiedziałem się odpowiedzi. Musimy mieć pierwszą opcję pustą, aby tekst zastępczy był aktywowany dla pojedynczego pola wyszukiwania.

<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>"; 
    } 
    ?> 

W powyższym przypadku tekst zastępczy będzie domyślnie "Wybierz opcję".

Dla niestandardowej zastępczego tekstu dla pojedynczego wyszukiwania zaznacz pole można edytować js plik jak poniżej i mają pierwszą opcję puste dla tekstu zastępczego mają być wyświetlane:

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

Answer 2

Aby Twoja pierwsza opcja po prostu tekst wytyczne, ale nie dla użytkowników, aby go wybrać, użyj tego:

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

* Edit *

Ach przepraszam, nie czytać swoje pytanie wystarczająco wyraźnie, aby zacząć.

Najwyraźniej pierwsza wersja <option> musi być pusta. Zobacz this jsfiddle.

Answer 3

korzystanie data-placeholder="YOUR TEXT" w select tagu

Answer 4

Jest rzeczywiście lepsze/łatwiejsze rozwiązanie tego problemu, jeśli konstruujesz za pomocą HTML zamiast JS. Musisz zrobić dwie rzeczy.

1. Pierwszy <option> w twoim <select> powinien być pusty.
2. Powinieneś dołączyć placeholder="Placeholder goes here" do swojego <select>. Podobno kiedyś było to nazywane data-placeholder, co moim zdaniem doprowadziło do pewnego zamieszania.

Więc w sumie:

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

Answer 5

odpowiedzi użytkownika @Zack Joerdan rozwiązać mój problem. Tak więc wymagana wartość sprężyny w opcji

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