Mam wybraną wtyczkę do pojedynczego wyboru zaimplementowanego w moim kodzie. Próbuję dodać tekst zastępczy dla skrzynek wyszukiwania, ale nie jestem w stanie. Próbowałem następujących 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żywać data-placeholder="Select an option", ale to też nie pomaga. Czy ktoś może dać mi znać, czego mi brakuje?

Z góry dziękuję.

22
rond 25 listopad 2013, 22:38

6 odpowiedzi

Najlepsza odpowiedź

W porządku. Dowiedziałem się odpowiedzią. Musimy mieć pierwszą opcję jako puste miejsce dla aktywacji tekstu zastępczego dla pojedynczego wyboru 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 zostanie domyślny "Wybierz opcję".

W przypadku niestandardowego tekstu symbolicznego dla pojedynczego pola wyboru wyszukiwania można edytować plik JS jak poniżej i mieć pierwszą opcję pustą dla tekstu zastępczego:

<script>
  $(document).ready(function() {
    $('.chosen-select').chosen({
      placeholder_text_single: "Select Project/Initiative...",
      no_results_text: "Oops, nothing found!"
    });  
  });
</script>
36
rond 3 grudzień 2013, 23:51

Użyj data-placeholder="YOUR TEXT" w select

33
Baby Groot 16 grudzień 2014, 12:24

Aby dokonać pierwszej opcji po prostu tekst prowadzący, ale nie można go wybrać, użyj tego:

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

* Edytuj *

Przepraszam, nie przeczytałem twojego pytania wystarczająco wyraźnie, aby zacząć.

Najwyraźniej pierwszy <option> musi być pustym. Zobacz Ten jsfiddle.

6
t0mppa 25 listopad 2013, 19:44

Odpowiedź użytkownika @Zack Joerdan rozwiązał mój problem. Więc sprężyna wymagana wartość opcji wewnątrz

<select placeholder="Placeholder goes here">
    <option value=""><!-- Empty option goes here. --><option>
    <option>Other Option</option>
</select>
2
Cleriston Lincoln 11 maj 2017, 18:18

W rzeczywistości istnieje lepsze / łatwiejsze rozwiązanie tego problemu, jeśli budujesz za pomocą HTML, a nie JS. Musisz robić dwie rzeczy.

  1. Pierwszy <option> w twoim <select> powinien być pusty.
  2. Powinieneś zawierać placeholder="Placeholder goes here" w swoim {x1}}. Najwyraźniej to było kiedyś nazywane data-placeholder, które myślę, doprowadziło do pewnego zamieszania.

Tak więc w sumie:

<select placeholder="Placeholder goes here">
    <option><!-- Empty option goes here. --><option>
    <option>Other Option</option>
</select>
1
Zack Jordan 16 grudzień 2015, 15:53

Możesz po prostu dodać data-placeholder="YOUR TEXT" nie ma potrzeby korzystania z jQuery dla tego samego

Oto przykład

<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 28 czerwiec 2018, 05:01