it-swarm.com.de

platzhaltertext für das ausgewählte Plugin für Single Select funktioniert nicht

Ich habe das ausgewählte Plugin für Single Select in meinem Code implementiert. Ich versuche, den Platzhaltertext für die Suchfelder hinzuzufügen, kann dies jedoch 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 auch versucht, data-placeholder="Select an option" zu verwenden, aber das hilft auch nicht. Kann mir bitte jemand mitteilen, was mir fehlt?

Danke im Voraus.

17
rond

Okay. Ich habe die Antwort herausgefunden. Die erste Option muss leer sein, damit der Platzhaltertext für das Suchfeld "Einzelauswahl" aktiviert werden kann.

<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 der Platzhaltertext standardmäßig auf "Option auswählen" gesetzt.

Für einen benutzerdefinierten Platzhaltertext für ein einzelnes Suchauswahlfeld können Sie Ihre js-Datei wie folgt bearbeiten und die erste Option leer lassen, damit der Platzhaltertext angezeigt wird:

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

verwenden Sie data-placeholder="YOUR TEXT" im Tag select 

22
Giridhar Shukla

Um Ihre erste Option zu erstellen, verwenden Sie einfach einen Anleitungstext, der von Benutzern jedoch nicht ausgewählt werden kann.

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

* Bearbeiten *

Ah, Entschuldigung, ich habe deine Frage nicht klar genug gelesen.

Anscheinend muss der erste <option> ein leerer sein. Siehe diese jsfiddle .

4
t0mppa

Es gibt tatsächlich eine bessere/einfachere Lösung für dieses Problem, wenn Sie über HTML und nicht über JS erstellen. Sie müssen zwei Dinge tun.

  1. Der erste <option> in Ihrem <select> sollte leer sein.
  2. Sie sollten placeholder="Placeholder goes here" in Ihren <select> aufnehmen. Anscheinend hieß das einmal data-placeholder, was meiner Meinung nach zu Verwirrung geführt hat.

Also insgesamt:

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

Sie können einfach data-placeholder="YOUR TEXT" hinzufügen. Es ist nicht notwendig, Jquery für dasselbe zu verwenden

Hier ist das Beispiel

<select id="search_pi"  data-placeholder="Select Project/Initiative..." name="search_pi" type="text" class="chosen-select" style="width:450px;" onchange="this.form.submit()" >
              <?php
                include "../includes/search_dropdown.php";
                foreach($proj_ini_Array as $qa){
                  echo "<option value = \"$qa\">$qa</option>";
                }
              ?>
</select>
0
Mr. HK

Benutzeraktion @Zack Joerdan hat mein Problem gelöst. __

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