Yer tutucu içeren bir açılır liste yapmaya çalışıyorum. placeholder="stuff"Diğer formların yaptığı gibi desteklemiyor gibi görünüyor . Açılır listemde yer tutucu almanın farklı bir yolu var mı?

Evet, seçenekte sadece "devre dışı bırakıldı".

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

Kemanla bağlantı

Yanıtı şu adresten de görüntüleyebilirsiniz:

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

Gizli kullan:

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

dropdown veya select yer tutucusuna sahip değildir çünkü HTML onu desteklememektedir, ancak aynı etkiyi yaratmak mümkündür, böylece diğer inputs yer tutucusuyla aynı görünür

    $('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>

listedeki ilk seçeneği görmek istiyorsanız css'den display özelliğini kaldırın

Seçme alanını javascript aracılığıyla başlatıyorsanız, varsayılan yer tutucu metnin yerine aşağıdakiler eklenebilir

noneSelectedText: 'Insert Placeholder text'

örnek: eğer varsa:

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

javascript'inizde, seçiciyi şu şekilde başlatırsınız

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

Seçeneklerin çoğu, çoklu seçim için sorunludur. Başlık özelliğini yerleştirin ve ilk seçeneği data-hidden = "true" yapın

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

Gizli öznitelik ekleyin:

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

Bunu dene:

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

required+ kullanırken value=""kullanıcı bunu seçemezse hidden, kullanıcı seçenekler kutusunu açtığında seçenekler listesinden gizlenir

@Title = "stuff" ı deneyin. Benim için çalıştı.

Bütün bu seçenekler .... doğaçlamalardır. Bootstrap bunun için zaten bir çözüm sunuyor. Tüm açılır öğeleriniz için yer tutucuyu değiştirmek isterseniz, değerini değiştirebilirsiniz.

bootstrap dosyasında noneSelectedText.

Bireysel olarak değiştirmek için TITLE parametresini kullanabilirsiniz.

misal:

<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. içinde bootstrap-select.jsBultitle: null, ve kaldırın.
2. eklemek title="YOUR TEXT"içinde <select>eleman.
3. Güzel :)

Misal:

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

Sanırım, kullanıcının seçeceği ilk seçeneği devre dışı bırakacak bir sınıf ve JQuery kodu içeren Açılır kutu, Seçim Kutusu yer tutucusu olarak mükemmel çalışacaktır .

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

İlk seçeneği JQuery tarafından devre dışı bırakın.

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

Bu, Yer Tutucu olarak Açılır Listenin ilk seçeneğini yapacak ve kullanıcı artık ilk seçeneği seçemeyecektir.

Umarım yardımcı olur!!

İşte bunu yapmanın başka bir yolu

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

"Platform Seç", yer tutucu haline gelir ve "gerekli" özelliği, kullanıcının seçeneklerden birini seçmesini sağlar.

Alan adlarını veya Etiketleri kullanmak istemediğinizde çok kullanışlıdır.

Bootstrap kullanarak yapabilecekleriniz budur. "Text-hide" sınıfını kullanarak, devre dışı bırakılan seçenek ilk başta gösterilecek, ancak listede gösterilmeyecektir.

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

Bootstrap select seçeneği vardır noneSelectedText. Bunu data-none-selected-textöznitelik yoluyla ayarlayabilirsiniz . Belgeler .

için .htmlsayfa

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

için .jspveya başka herhangi bir servlet sayfası.

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

Bootstrap kullanarak, filtreler veya diğer şeyler için kullanma seçeneğine bazı değerler eklemeniz gerekiyorsa, yer tutucu olarak istediğiniz seçeneğe "bs-title-option" sınıfını ekleyebilirsiniz:

<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 bu sınıfı titleözniteliğe ekler .

Angular 2 için Çözüm

Seçimin üstünde bir etiket oluşturun

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

ve üste yerleştirmek için CSS uygulayın

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

pointer-events: none , bir seçeneği seçtiğinizde gizlenen etikete tıkladığınızda seçimi görüntülemenizi sağlar.

açısal html css

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

defaultValueile değiştirebilirsiniz , selectedancak bu uyarı verir.