Bagaimana cara membuat kotak daftar dalam HTML tanpa mengizinkan banyak pilihan?

97

Saya tidak punya banyak pengalaman dalam HTML. Saya ingin membuat kotak daftar sederhana, tetapi salah satu persyaratannya adalah MENOLAK beberapa pilihan. Sebagian besar kode untuk kotak daftar berjalan seperti ini -

 <select name="sometext" multiple="multiple">
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
    <option>text4</option>
    <option>text5</option>
 </select>

Tetapi ini memungkinkan untuk beberapa pilihan.

Di sini , pertanyaan serupa telah diajukan, tetapi jawaban "terbaik" tidak disukai. Jadi saya tidak yakin bagaimana lagi ini bisa dilakukan. Tolong bantu.

html listbox

— Kode biru
sumber

5

Untuk Anda pendatang baru lainnya, harap hindari situs web yang disebutkan di atas untuk kebaikan Anda sendiri - mereka memiliki SEO yang bagus, tetapi itu saja. Itu penuh dengan praktik dan kebiasaan buruk yang akan Anda sesali karena Anda pelajari nanti. Gunakan API dari MDN (Mozilla), dalam hal ini developer.mozilla.org/en-US/docs/Web/HTML/Element/select .

— Ben

3

@Steve terima kasih atas peringatannya. Komentarnya "Inilah mengapa saya punya pekerjaan" juga dianggap sombong. Jika Anda memiliki pekerjaan, bagus untuk Anda. Ini adalah forum untuk jawaban dan bukan iklan.

— CodeBlue

170

Cukup gunakan atribut ukuran:

<select name="sometext" size="5">
  <option>text1</option>
  <option>text2</option>
  <option>text3</option>
  <option>text4</option>
  <option>text5</option>
</select>

Untuk memperjelas, menambahkan atribut ukuran tidak menghapus beberapa pilihan.

Pilihan tunggal berfungsi karena Anda menghapus atribut multiple = "multiple".

Menambahkan atribut size = "5" masih merupakan ide yang bagus, artinya setidaknya 5 baris harus ditampilkan. Lihat referensi lengkapnya di sini

— aaroncatlin.dll
sumber

2

Dipilih untuk kebenaran. Selain itu, ketika pertanyaan diposting sebelumnya, solusi ini mungkin tidak didukung secara luas oleh semua browser.

— aaroncatlin

Itu mungkin downvoted karena tidak ada apa pun dalam standar HTML yang memerlukan browser untuk merendernya sebagai kotak daftar jika atribut size disetel. Ya, semua browser utama saat ini melakukannya, tetapi tidak ada jaminan mereka akan selalu melakukannya. Namun secara realistis, ini akan menjadi perubahan besar untuk begitu banyak situs web, tidak ada browser yang akan mengubahnya.

— Elezar

1

Standar terbuka untuk sedikit interpretasi: "Ukuran tampilan dari elemen pilih adalah hasil dari penerapan aturan untuk mengurai bilangan bulat non-negatif ke nilai atribut ukuran elemen , jika memiliki satu dan penguraiannya berhasil." Meskipun ini tidak secara spesifik menyatakan bahwa itu harus ditampilkan sebagai Dropdown atau Listbox, akan sulit untuk menampilkan kontrol Dropdown yang menampilkan lebih dari 1 elemen. ( html.spec.whatwg.org/#the-select-element )

— aaroncatlin

Terima kasih!! Dan ini bisa menjadi dinamis, jelas, dengan Js: D

— Jcc. Sanabria

56

Hapus atribut multiple = "multiple" dan tambahkan SIZE = 6 dengan jumlah elemen yang Anda inginkan

Anda mungkin ingin memeriksa situs ini

http://www.htmlcodetutorial.com/forms/_SELECT.html

— pollirrata
sumber

2

Untuk Asp.Net MVC

@Html.ListBox("parameterName", ViewBag.ParameterValueList as MultiSelectList, 
 new { 
 @class = "chosen-select form-control"
 })

atau

  @Html.ListBoxFor(model => model.parameterName,
  ViewBag.ParameterValueList as MultiSelectList,
   new{
       data_placeholder = "Select Options ",
       @class = "chosen-select form-control"
   })

— Deshani Tharaka
sumber