Bootstrap wybierz listę rozwijaną symbol zastępczy

Użyj ukrytego:

<select>
    <option hidden >Display but don't show in list</option>
    <option> text 1 </option>
    <option> text 2 </option>
    <option> text 3 </option>
</select>

Rozwijane lub select nie ma elementu zastępczego, ponieważ HTML go nie obsługuje, ale możliwe jest utworzenie tego samego efektu, więc wygląda tak samo jak inne elementy zastępcze

    $('select').change(function() {
     if ($(this).children('option:first-child').is(':selected')) {
       $(this).addClass('placeholder');
     } else {
      $(this).removeClass('placeholder');
     }
    });

.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
   <option value="">Your Placeholder Text</option>
   <option value="1">Text 1</option>
   <option value="2">Text 2</option>
   <option value="3">Text 3</option>
</select>

Jeśli chcesz zobaczyć pierwszą opcję na liście usuń właściwość display z css

Dodaj Ukryty atrybut:

<select>
    <option value="" selected disabled hidden>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Spróbuj tego:

<select class="form-control" required>
<option value="" selected hidden>Select...</option>

Podczas stosowania required + value="" wtedy Użytkownik nie może go wybrać użycie hidden spowoduje ukrycie go z listy opcji, gdy użytkownik otworzy okno opcji

Jeśli inicjalizujesz pole select za pomocą javascript, można dodać następujący tekst, aby zastąpić domyślny tekst zastępczy

noneSelectedText: 'Insert Placeholder text'

Przykład: jeśli masz:

<select class='picker'></select>

W Twoim javascript inicjalizujesz selectpicker w ten sposób

$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});  

Try @ title = "rzeczy". U mnie zadziałało.

Wszystkie te opcje są.... improwizacje. Bootstrap oferuje już rozwiązanie tego problemu. Jeśli chcesz zmienić symbol zastępczy dla wszystkich rozwijanych elementów, możesz zmienić wartość

NoneSelectedText w pliku bootstrap.

Aby zmienić indywidualnie, możesz użyć parametru TITLE.

Przykład:

<div class="form-group">
          <label class="control-label col-xs-2" id="country">Continent:</label>
          <div class="col-xs-9">
            <select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
              <option value="Africa">Africa</option>
              <option value="Asia">Asia</option>
              <option value="North America">America North</option>
              <option value="South America">America South</option>
              <option value="Antarctica">Antarctica</option>
              <option value="Australia">Australia</option>
              <option value="Europe">Europe</option>
            </select>
          </div>
        </div>

Większość opcji jest problematyczna dla multi-select. Umieść atrybut Title i utwórz pierwszą opcję jako data-hidden= "true"

<select class="selectpicker" title="Some placeholder text...">
    <option data-hidden="true"></option>
    <option>First</option>
    <option>Second</option>
</select>

Oto inny sposób, aby to zrobić

<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
    <option value="">Choose Platform</option>
<option value="iOS">iOS</option>
    <option value="Android">Android</option>
    <option value="Windows">Windows</option>
</select>

" Wybierz platformę "staje się elementem zastępczym, a właściwość "required" zapewnia, że użytkownik musi wybrać jedną z opcji.

Bardzo przydatne, gdy nie chcesz używać nazw pól lub etykiet użytkownika.

Używając Bootstrap, to jest to, co możesz zrobić. Używając klasy "Text-hide", opcja wyłączona zostanie wyświetlona na początku, ale nie na liście.

<select class="form-control" >
  <option selected disabled class="text-hide">Title</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Bootstrap select posiada opcję noneSelectedText. Można go ustawić za pomocą atrybutu data-none-selected-text. Dokumentacja .

Dla .html strony

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Dla .jsp lub jakiejkolwiek innej strony servleta.

<select>
    <option value="" selected="true" disabled="true">Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

1. in bootstrap-select.js Find title: null, and remove it.
2. dodaj title="YOUR TEXT" w elemencie <select>.
Świetnie:) [7]}

Przykład:

<select title="Please Choose one item">
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Myślę, że rozwijane pole z klasą i kodem JQuery, aby wyłączyć pierwszą opcję wyboru przez użytkownika, będzie działać idealnie jako Select Box placeholder.

<select class="selectboxclass">
   <option value="">- Please Select -</option>
   <option value="IN">India</option>
   <option value="US">America</option>
</select>

Make the first option disabled by JQuery.

<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>

Spowoduje to, że pierwsza opcja z listy rozwijanej będzie zastępcza, a użytkownik nie będzie już mógł wybrać pierwszej opcji.