pilih opsi default sebagai kosong

459

Saya memiliki persyaratan yang sangat aneh, di mana saya diharuskan untuk tidak memiliki opsi yang dipilih secara default di menu drop down dalam HTML. Namun,

Saya tidak bisa menggunakan ini,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
Luaskan cuplikan

Karena, untuk ini saya harus melakukan validasi untuk menangani opsi pertama. Adakah yang bisa membantu saya dalam mencapai target ini tanpa benar-benar memasukkan opsi pertama sebagai bagian dari tag pilih?

html 
— Pankaj Parashar
sumber
2
Sejauh yang saya tahu ini adalah satu-satunya cara untuk mendapatkan garis kosong. Apa maksud Anda yang harus Anda lakukan validasi? Cukup setel centang untuk mengatakan jika nilai = "" lalu kembalikan salah.
— Robert
1
Ini akan menjadi peluang bagus untuk menggunakan tombol radio alih-alih dropdown.
— Blazemonger
9
Sama sekali bukan persyaratan yang aneh, menurut saya. Saya di kapal yang sama. Saya memerlukan standar 'tidak ada opsi' juga. Saya memiliki beberapa drop down yang tidak diharuskan untuk mengirimkan formulir. Menonaktifkannya dengan cara ini mencegah pengguna dari membuat pilihan saat itu tidak relevan. Pertanyaan bagus! +1
— Scott
Bukan persyaratan aneh, jika SELECT memiliki atribut DIBUTUHKAN maka memiliki opsi label tempat penampung adalah persyaratan HTML5 dev.w3.org/html5/spec-preview/…
— Testo Testini
@Blazemonger tombol radio adalah ide yang buruk jika Anda memiliki lebih dari 3 atau 4. Bayangkan daftar dropdown dengan 15+ opsi, atau 50 atau lebih? Mereka memiliki masalah desain mereka sendiri dalam banyak kasus tetapi masalah ini tetap bahwa tombol radio tidak skala sama sekali .
— TylerH

Jawaban:

1015

Mungkin ini akan sangat membantu

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option --Akan ditampilkan secara default. Tetapi jika Anda memilih suatu opsi, Anda tidak akan dapat memilihnya kembali.

Anda juga dapat menyembunyikannya dengan menambahkan yang kosong option

<option style="display:none">

jadi itu tidak akan muncul dalam daftar lagi.

pilihan 2

Jika Anda tidak ingin menulis CSS dan mengharapkan perilaku yang sama dari solusi di atas, cukup gunakan:

<option hidden disabled selected value> -- select an option -- </option>

— Langkah pertama
sumber
15
Berikut adalah JSFiddle di atas , jika ada yang membutuhkannya.
— Uwe Keim
26
@azerafati seperti @Rafael_Mori menunjukkan Anda dapat mengarsipkan yang sama dengan menggunakan atribut "tersembunyi", jadi tidak diperlukan CSS. Hanya HTML5 murni;)<option hidden disabled selected value> -- select an option -- </option>
— BrainOverflow
Bagaimana jika saya ingin dapat memilihnya kembali? Saya hanya tidak ingin mengirim apa pun. Apa itu mungkin?
— Michael Rogers
1
menambahkan atribut tersembunyi ke elemen opsi melakukan keajaiban untuk saya! tidak berharap semudah ini. terima kasih
— S. Domeng
Sadarilah, baik atribut tersembunyi maupun gaya tampilan tidak berfungsi di IE, bahkan 11. stackoverflow.com/questions/58862242/…
— yatskovsky
113

Anda dapat menggunakan Javascript untuk mencapai ini. Coba kode berikut:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

atau JQuery

$("#myDropdown").prop("selectedIndex", -1);
— Matschie
sumber
Solusi ini sebagian berfungsi dengan Chrome 35: dropdown tidak menunjukkan pilihan apa pun ketika daftar opsi tidak terlihat, tetapi menunjukkan opsi pertama yang dipilih ketika daftar opsi dibuat terlihat. Safari 7 berperilaku seperti yang dimaksudkan.
— flochtililoch
Yang menarik adalah: ini bekerja dengan validasi form HTML. Jika Anda menggunakan requiredatribut pada selectelemen dan mengirimkan tanpa memilih opsi, validasi formulir akan gagal dan memberi tahu Anda, Anda harus membuat pilihan. Karena itu saya sangat suka pendekatan ini. (Setidaknya diuji di Chrome)
— Andreas Linnert
Tidak berfungsi (setidaknya di browser saat ini saat penulisan ini - dan tidak perlu bergantung pada javascript.
— silentmouth
1
Pada 2019, hanya Safari IOS 10 yang menolak untuk bermain bola dengan ini
— Ayyash
36

Hari ini (2015-02-25)

Ini adalah HTML5 yang valid dan mengirimkan blank (bukan spasi) ke server:

<option label=" "></option>

Validitas terverifikasi di http://validator.w3.org/check

Perilaku yang diverifikasi dengan Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

Berikut ini juga melewati validasi hari ini , tetapi melewati semacam karakter ruang juga server dari sebagian besar browser (mungkin tidak diinginkan) dan kosong pada yang lain (Chrome40 / Linux melewati kosong):

<option>&#160;</option>

Sebelumnya (2013-08-02)

Menurut catatan saya, entitas non-breaking-space di dalam tag opsi yang ditunjukkan di atas menghasilkan kesalahan berikut pada 2013:

Kesalahan: Layanan Validaton Markup W3C (Publik): Elemen opsi anak pertama dari elemen pilih dengan atribut yang diperlukan dan tanpa atribut ganda, dan yang ukurannya 1, harus memiliki atribut nilai kosong, atau harus tidak memiliki konten teks.

Pada saat itu, ruang reguler adalah XHTML4 yang valid dan mengirim yang kosong (bukan spasi) ke server dari setiap browser:

<option> </option>

Masa depan

Ini akan membuat hati saya senang jika spec diperbarui untuk secara eksplisit mengizinkan opsi kosong. Lebih disukai menggunakan sintaks yang paling singkat. Salah satu dari yang berikut ini akan menjadi luar biasa:

<option />
<option></option>

File Uji

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>
— GlenPeterson
sumber
15 

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>
Luaskan cuplikan

Masukkan "tersembunyi" pada opsi yang ingin Anda sembunyikan di daftar dropdown.

— Rafael Mori
sumber
8

Solusi yang berfungsi hanya dengan menggunakan CSS:

A: CSS sebaris

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
Luaskan cuplikan

B: Lembar Gaya CSS

Jika Anda memiliki file CSS, Anda dapat menargetkan yang pertama optionmenggunakan:

select.first-opt-hidden option:first-of-type {
  display:none;
}
<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
Luaskan cuplikan

— Kai Noack
sumber
4

Ini akan membantu:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>
Luaskan cuplikan

— rohan parab
sumber
Ini adalah cara paling modern (html5) untuk mencapai persyaratan ini, perlu diketahui bahwa ini membutuhkan tombol type = submit. Suatu tombol type = dengan onclick submit handler tidak secara otomatis mengharuskan pengguna untuk memilih.
— Arjan
3 
<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Anda dapat menghindari validasi khusus dalam kasus ini.

— Fawaz
sumber
2

Hanya sebuah komentar kecil:

beberapa peramban Safari tampaknya tidak menghargai atribut "tersembunyi" atau tampilan pengaturan gaya "tidak ada" (diuji dengan Safari 12.1 di bawah MacOS 10.12.6). Tanpa teks placeholder yang eksplisit, browser ini hanya menampilkan baris pertama yang kosong dalam daftar opsi. Karena itu mungkin berguna untuk selalu menyediakan beberapa teks penjelasan untuk entri "dummy" ini:

<option hidden disabled selected value>(select an option)</option>

Berkat atribut "dinonaktifkan", itu tidak akan dipilih secara aktif.

— Andreas Rozek
sumber
1

Saya mengerti apa yang Anda coba lakukan. Cara terbaik dan paling sukses adalah:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>
— Guryash Singh
sumber
1

Saya menemukan itu sangat menarik karena saya baru saja mengalami hal yang sama belum lama ini. Namun, saya menemukan contoh di Internet tentang solusi mengenai hal ini.

Tanpa basa-basi lagi, lihat fragmen kode di bawah ini:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

Dengan itu, itu akan tetap tidak dapat dikirim tetapi dapat dipilih, kapan saja. Lebih banyak kenyamanan untuk Antarmuka Pengguna dan bagus untuk Pengalaman Pengguna.

Yah itu saja, saya harap ini membantu. Bersulang!

— farisfath25
sumber
Membuatnya tidak dapat mengirim tetapi juga menarik perhatian pengguna ke dropdown tampaknya berlebihan, tapi saya suka sarannya
— Iofacture
@lofacture: terima kasih atas masukannya. sebenarnya, kode yang saya tulis adalah yang saya inginkan, tetapi ya seperti yang Anda katakan, itu tergantung pada kebutuhan pengguna / pemilik
— farisfath25
0

Tidak ada solusi HTML. Dengan spesifikasi HTML 4.01, perilaku browser tidak terdefinisi jika tidak ada optionelemen yang memilikiselected atribut, dan apa yang dilakukan browser dalam praktiknya adalah bahwa mereka membuat opsi pertama yang dipilih sebelumnya.

Sebagai solusinya, Anda bisa mengganti selectelemen dengan serangkaian input type=radioelemen (dengan nameatribut yang sama ). Ini menciptakan kontrol dari jenis yang sama meskipun dengan tampilan dan antarmuka pengguna yang berbeda. Jika tidak ada input type=radioelemen yang memiliki checkedatribut, awalnya tidak ada yang dipilih di sebagian besar browser modern.

— Jukka K. Korpela
sumber
0

Saya menggunakan framework Laravel 5 dan jawaban @Gambi bekerja untuk saya juga tetapi dengan beberapa perubahan untuk proyek saya.

Saya memiliki nilai opsi dalam tabel database dan saya menggunakannya dengan pernyataan foreach. Tetapi sebelum pernyataan itu saya telah menambahkan opsi dengan pengaturan yang disarankan @Gambit dan itu berhasil.

Di sini contoh saya:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

Saya harap ini membantu seseorang juga. Pertahankan kerja bagus!

— LOG Oracle
sumber
0

Coba ini:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

Opsi pertama di drop down akan kosong.

— Abhijit pai
sumber
0

Untuk menunjukkan, pilih nilai di tarik turun dan sembunyikan setelah beberapa nilai dipilih. silakan gunakan kode di bawah ini.

itu juga akan mendukung validasi yang diperlukan.

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>
Luaskan cuplikan

— Bathri Nathan
sumber
0

Jika Anda menggunakan Angular (2+), (atau kerangka kerja lainnya), Anda bisa menambahkan beberapa logika. Logikanya adalah: hanya menampilkan opsi kosong jika pengguna belum memilih yang lain. Jadi setelah pengguna memilih opsi, opsi kosong menghilang.

Untuk Angular (9) ini akan terlihat seperti ini:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>
— Mike de Klerk
sumber
-2

Coba ini:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Validasi dalam HTML5. Bekerja dengan requiredatribut pada elemen pilih. Dapat dipilih kembali. Bekerja di Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

— Tristan Bailey
sumber
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.