PILIH HTML kosong tanpa item kosong di daftar dropdown

110

Bagaimana mengimplementasikan Subj?

ketika saya menulis:

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

maka item yang dipilih default adalah "aaaa"

ketika saya menulis:

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

maka item yang dipilih default kosong, tapi item kosong ini muncul di drop down.

bagaimana saya dapat menerapkan tag SELECT dengan nilai kosong default yang tersembunyi di daftar drop-down?

Nick Stavrogin
sumber
Kemungkinan duplikat dari opsi pilih default kosong
Blazemonger

Jawaban:

182

Cukup gunakan atribut yang dinonaktifkan dan / atau tersembunyi:

<option selected disabled hidden style='display: none' value=''></option>
  • selected menjadikan opsi ini sebagai opsi default.
  • disabled membuat opsi ini tidak dapat diklik.
  • style='display: none'membuat opsi ini tidak ditampilkan di browser lama. Lihat: Dapatkah Saya Menggunakan dokumentasi untuk atribut tersembunyi.
  • hidden membuat opsi ini tidak ditampilkan di daftar drop-down.
Eduardo
sumber
3
Sebenarnya IE 11 memang menampilkan opsi "tersembunyi".
Edward Olamisan
6
Webkit tampaknya tidak mendukung atribut 'tersembunyi'
Reesor Ethan
2
Seperti disebutkan dalam Can I Use , hiddenatributnya efektif display: none, jadi untuk mendukung browser lama:<option selected disabled hidden style='display: none' value=''></option>
Neta
66

Anda dapat mengatur selectedIndexke -1menggunakan .prop: http://jsfiddle.net/R9auG/ .

Untuk versi jQuery yang lebih tua menggunakan .attrbukan .prop: http://jsfiddle.net/R9auG/71/ .

pimvdb.dll
sumber
@IronicMuffin: Terima kasih; baru saja diuji dan tampaknya berfungsi di semua browser utama.
pimvdb
@zobidafly: Terima kasih telah mengedit; Saya telah menjelaskan sedikit.
pimvdb
1
.attrakan gagal di versi jQuery baru. Mencoba menjadi pintar membuatku gagal.
Carson Ip
33

Cukup menggunakan

<option value="" selected disabled>Please select an option...</option>

akan berfungsi di mana saja tanpa skrip dan memungkinkan Anda untuk menginstruksikan pengguna pada saat yang sama.

mvreijn
sumber
25
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
Andrey R
sumber
1
ff / chrome - ok, opera / ie7-9 - tidak baik Anda dapat mengujinya di sini (dengan atau tanpa js): jsfiddle.net/R9auG/145 jadi saya merekomendasikan js-approach oleh @pimvdb
tibalt
11

Berikut ini cara sederhana untuk melakukannya menggunakan JavaScript biasa. Ini adalah padanan vanilla dari skrip jQuery yang diposting oleh pimvdb. Anda bisa mengujinya di sini .

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

.

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

Pastikan "id_here" cocok di formulir dan di JavaScript.

Mingwei Samuel
sumber
3

Tidak boleh. Mereka tidak bekerja seperti itu. Menu tarik-turun harus memiliki salah satu opsinya yang dipilih setiap saat.

Anda dapat (meskipun saya tidak merekomendasikannya) menonton acara perubahan dan kemudian menggunakan JS untuk menghapus opsi pertama jika kosong.

Quentin
sumber
3
Mengapa Anda tidak merekomendasikan perilaku ini?
Josh Noe
Ada banyak kasus di mana Anda ingin pengguna secara aktif memilih sesuatu dari daftar. Saya tidak berpikir JS adalah cara yang paling optimal untuk melakukannya (meskipun sepertinya itu satu-satunya cara), tetapi saya benar-benar berpikir harus ada cara.
qwerty
2

Untuk html @isherwood murni memiliki solusi yang bagus. Untuk jQuery, berikan ID pada drop-down pilihan Anda lalu pilih dengan jQuery:

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form> 

Kemudian gunakan jQuery ini untuk menghapus drop-down pada pemuatan halaman:

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

Atau letakkan di dalam fungsi dengan sendirinya:

$('#myDropDown').val(''); 

menyelesaikan apa yang Anda cari dan mudah untuk menempatkan ini dalam fungsi yang mungkin dipanggil di halaman Anda jika Anda perlu mengosongkan drop-down tanpa memuat ulang halaman.

Jason Slobotski
sumber
0

Anda dapat mencoba potongan ini

$("#your-id")[0].selectedIndex = -1

Itu berhasil untuk saya.

Shenbag
sumber
1
Sebaiknya berikan jsfiddle.net untuk menyertai jawaban guna memberikan penjelasan yang lebih jelas.
Anonim
1
Ini mengasumsikan OP menggunakan jQuery.
evanrmurphy