Saya mencoba membuat daftar dropdown yang berisi placeholder. Tampaknya tidak mendukung placeholder="stuff"seperti bentuk lain. Apakah ada cara lain untuk mendapatkan placeholder di dropdown saya?

Ya hanya "dipilih dinonaktifkan" di opsi.

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

Tautan ke biola

Anda juga dapat melihat jawabannya di

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

Gunakan tersembunyi:

<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 atau pilih tidak memiliki placeholder karena HTML tidak mendukungnya tetapi dimungkinkan untuk membuat efek yang sama sehingga terlihat sama dengan placeholder input lainnya

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

jika Anda ingin melihat opsi pertama dalam daftar, hapus properti tampilan dari css

Jika Anda menginisialisasi bidang pilih melalui javascript, berikut ini dapat ditambahkan untuk menggantikan teks placeholder default

noneSelectedText: 'Insert Placeholder text'

contoh: jika Anda memiliki:

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

di javascript Anda, Anda menginisialisasi pemilih pilih seperti ini

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

Sebagian besar opsi bermasalah untuk banyak pilihan. Tempatkan atribut Title, dan buat opsi pertama sebagai data-hidden = "true"

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

Tambahkan atribut tersembunyi:

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

Coba ini:

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

ketika menggunakan required+ value=""maka pengguna tidak dapat memilihnya menggunakan hiddenakan membuatnya tersembunyi dari daftar opsi, ketika pengguna membuka kotak opsi

Coba @title = "barang". Itu berhasil untuk saya.

Semua pilihan ini adalah .... improvisasi. Bootstrap sudah menawarkan solusi untuk ini. Jika Anda ingin mengubah placeholder untuk semua elemen dropdown Anda, Anda dapat mengubah nilainya

noneSelectedText di file bootstrap.

Untuk mengubah satu per satu, Anda dapat menggunakan parameter TITLE.

contoh:

<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. di bootstrap-select.jsTemukan title: null, dan hapus.
2. tambahkan title="YOUR TEXT"di <select>elemen.
3. Baik :)

Contoh:

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

Saya pikir, kotak Dropdown dengan kelas dan kode JQuery untuk menonaktifkan opsi pertama untuk dipilih pengguna, akan bekerja dengan sempurna sebagai placeholder Select Box .

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

Jadikan opsi pertama dinonaktifkan oleh JQuery.

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

Ini akan membuat opsi pertama Dropdown sebagai Placeholder dan pengguna tidak lagi dapat memilih opsi pertama.

Semoga membantu !!

Berikut cara lain untuk melakukannya

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

"Pilih Platform" menjadi placeholder dan properti 'wajib' memastikan bahwa pengguna harus memilih salah satu opsi.

Sangat berguna, ketika Anda tidak ingin menggunakan nama kolom atau Label.

Menggunakan Bootstrap, Inilah yang dapat Anda lakukan. Menggunakan kelas "teks-sembunyikan", opsi yang dinonaktifkan akan ditampilkan pada awalnya tetapi tidak pada daftar.

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

Pilih bootstrap memiliki noneSelectedTextopsi. Anda dapat mengaturnya melalui data-none-selected-textatribut. Dokumentasi .

Untuk .htmlhalaman

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

untuk .jspatau halaman servlet lainnya.

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

Menggunakan bootstrap, jika Anda juga perlu menambahkan beberapa nilai ke opsi yang akan digunakan untuk filter atau hal-hal lain, Anda cukup menambahkan kelas "bs-title-option" ke opsi yang Anda inginkan sebagai placeholder:

<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 menambahkan kelas ini ke titleatribut.

Solusi untuk Angular 2

Buat label di atas pilihan

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

dan menerapkan CSS untuk menempatkannya di atas

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

pointer-events: none memungkinkan Anda untuk menampilkan pilihan saat Anda mengklik label, yang tersembunyi saat Anda memilih opsi.

bersudut html css

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

Anda bisa mengganti defaultValuedengan selectedtapi itu akan memberi peringatan.