Platzhaltertext für gewähltes Plugin für single wählen funktioniert nicht

Question

Ich habe das gewählte Plugin für single select in meinem Code implementiert. Ich versuche, den Platzhaltertext für die Suchfelder hinzuzufügen, kann dies aber nicht. Ich habe folgende Dinge ausprobiert:

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

Im Auswahlfeld habe ich versucht, auch data-placeholder="Select an option" verwenden, aber das nicht helfen. Kann mir bitte jemand sagen, was ich vermisse?

Vielen Dank im Voraus.

Answer 1

Okay. Ich habe die Antwort gefunden. Die erste Option muss leer sein, damit der Platzhaltertext für das Suchfeld "Single Select" aktiviert wird.

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

Im obigen Fall wird Platzhaltertext standardmäßig auf "Wählen Sie eine Option" gesetzt.

Eine individuelle Platzhalter-Text für eine einzelne Suche Auswahlbox Sie Ihre js wie unten Datei bearbeiten können und haben die erste Option Zuschnitt für den Platzhalter-Text angezeigt werden:

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

Answer 2

Um Ihre erste Option einfach ein Anleitungstext, aber nicht in der Lage zu machen für die Benutzer, um sie auszuwählen, verwenden Sie diese:

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

* Edit *

Ah sorry, Ihre Frage nicht gelesen hat klar genug, um damit anzufangen.

Anscheinend muss die erste <option> eine leere sein. Siehe this jsfiddle.

Answer 3

Verwendung data-placeholder="YOUR TEXT" in select Tag

Answer 4

Es gibt tatsächlich eine bessere/einfachere Lösung für dieses Problem, wenn Sie über HTML statt JS konstruieren. Du musst zwei Dinge tun.

1. Die erste <option> in Ihrer <select> sollte leer sein.
2. Sie sollten placeholder="Placeholder goes here" in Ihrem <select> einschließen. Anscheinend wurde das einmal data-placeholder genannt, was meiner Meinung nach zu einiger Verwirrung geführt hat.

also insgesamt:

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

Answer 5

Benutzeraktion gelöst @Zack Joerdan mein Problem. Also der erforderliche Wert der Feder innerhalb der Option

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