Próbuję utworzyć listę rozwijaną zawierającą symbol zastępczy. Wydaje się, że nie działa tak placeholder="stuff"jak inne formy. Czy istnieje inny sposób uzyskania symbolu zastępczego w moim menu rozwijanym?

Tak, tylko „wybrano wyłączone” w opcji.

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

Link do skrzypiec

Możesz również wyświetlić odpowiedź pod adresem

https://stackoverflow.com/a/5859221/1225125

Użyj ukrytych:

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

lista rozwijana lub wybierz nie ma symbolu zastępczego, ponieważ HTML go nie obsługuje, ale można stworzyć ten sam efekt, aby wyglądał tak samo jak inny symbol zastępczy wejścia

    $('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ść wyświetlania z css

Jeśli inicjujesz pole wyboru za pomocą javascript, możesz dodać następujące elementy, aby zastąpić domyślny tekst zastępczy

noneSelectedText: 'Insert Placeholder text'

przykład: jeśli masz:

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

w swoim javascript inicjalizujesz selektor w ten sposób

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

Większość opcji jest problematyczna w przypadku wielokrotnego wyboru. Umieść atrybut Tytuł i ustaw 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>

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 używania required+ value=""użytkownik nie może go wybrać używając hiddenspowoduje, że zostanie on ukryty na liście opcji, gdy użytkownik otworzy okno opcji

Spróbuj @title = "stuff". U mnie to zadziałało.

Wszystkie te opcje to… improwizacja. Bootstrap już oferuje na to rozwiązanie. Jeśli chcesz zmienić symbol zastępczy dla wszystkich elementów listy rozwijanej, 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>

1. w bootstrap-select.jsZnajdź title: null, i usuń.
2. dodać title="YOUR TEXT"w <select>elemencie.
3. W porządku :)

Przykład:

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

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

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

Wyłącz pierwszą opcję przez JQuery.

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

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

Mam nadzieję, że to pomoże!!

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ę symbolem zastępczym, a właściwość „wymagana” zapewnia, że ​​użytkownik musi wybrać jedną z opcji.

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

Używając Bootstrap, oto co możesz zrobić. Używając klasy "ukrywanie tekstu", wyłączona opcja będzie wyświetlana jako pierwsza, ale nie będzie 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>

Wybór Bootstrap ma noneSelectedTextopcję. Możesz to ustawić za pomocą data-none-selected-textatrybutu. Dokumentacja .

Na .htmlstronie

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

dla .jsplub dowolnej innej strony serwletu.

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

Używając bootstrap, jeśli chcesz również dodać jakieś wartości do opcji używanej dla filtrów lub innych rzeczy, możesz po prostu dodać klasę "bs-title-option" do opcji, którą chcesz jako symbol zastępczy:

<select class="form-group">
   <option class="bs-title-option" value="myVal">My PlaceHolder</option>
   <option>A</option>
   <option>B</option>
   <option>c</option>
</select>

Bootstrap dodaje tę klasę do titleatrybutu.

Rozwiązanie dla Angular 2

Utwórz etykietę na górze zaznaczenia

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

i zastosuj CSS, aby umieścić go na górze

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none umożliwia wyświetlenie zaznaczenia po kliknięciu etykiety, która jest ukryta po wybraniu opcji.

kątowy html css

<option value="" defaultValue disabled> Something </option>

można zastąpić defaultValuez selectedale to by dać ostrzeżenie.