web-dev-qa-db-fra.com

texte fictif pour le plugin choisi pour une sélection ne fonctionne

J'ai le plugin choisi pour single select implémenté dans mon code. J'essaie d'ajouter le texte d'espace réservé pour les champs de recherche, mais je ne le peux pas. J'ai essayé les choses suivantes:

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

Dans le champ de sélection, j'ai aussi essayé d'utiliser data-placeholder="Select an option" mais cela n'aide pas trop. Est-ce que quelqu'un peut me faire savoir ce qui me manque?

Merci d'avance.

javascriptjquerycssjquery-chosen
17
rond

D'accord. J'ai découvert la réponse. La première option doit être vide pour que le texte fictif soit activé dans le champ de recherche Sélection simple.

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

Dans le cas ci-dessus, le texte fictif sera remplacé par défaut par "Sélectionnez une option".

Pour un texte fictif personnalisé pour une zone de sélection de recherche, vous pouvez éditer votre fichier js comme ci-dessous et laisser la première option vide pour que le texte fictif soit affiché:

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

utiliser data-placeholder="YOUR TEXT" dans la balise select 

22
Giridhar Shukla

Pour que votre première option soit simplement un texte de guidage, mais que les utilisateurs ne puissent pas la sélectionner, utilisez ceci:

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

* Modifier *

Ah désolé, je n'ai pas lu votre question assez clairement pour commencer.

Apparemment, le premier <option> doit être vide. Voir ce jsfiddle .

4
t0mppa

Il existe en fait une solution meilleure/plus simple à ce problème si vous construisez via HTML plutôt que JS. Vous devez faire deux choses.

  1. Le premier <option> dans votre <select> doit être vide.
  2. Vous devez inclure placeholder="Placeholder goes here" dans votre <select>. Apparemment, cela s'appelait une fois data-placeholder, ce qui, à mon avis, a semé la confusion.

Donc, au total:

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

Vous pouvez simplement ajouter simplement data-placeholder="YOUR TEXT" Il n'est pas nécessaire d'utiliser jquery pour la même chose.

Voici l'exemple 

<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

Réponse de l'utilisateur @Zack Joerdan a résolu mon problème . Ainsi, la valeur requise du ressort dans l'option

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