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?


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.

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


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.


25
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>

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.


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.


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.


0

Anda dapat mencoba potongan ini

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

Itu berhasil untuk saya.


1
Sebaiknya berikan jsfiddle.net untuk menyertai jawaban guna memberikan penjelasan yang lebih jelas.
Anonim

1
Ini mengasumsikan OP menggunakan jQuery.
evanrmurphy
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.