<SELECT multiple> - bagaimana mengizinkan hanya satu item yang dipilih?

134

Saya memiliki <SELECT multiple>bidang dengan beberapa opsi dan saya ingin memperbolehkannya hanya memiliki satu opsi yang dipilih pada saat yang sama tetapi pengguna dapat menahan tombol CTRL dan memilih lebih banyak item sekaligus.

Apakah ada cara bagaimana melakukannya? (Saya tidak ingin menghapus 'banyak').

html html-select

— simPod
sumber

5

Apa? Mengapa? Ini perlu dijelaskan lebih lanjut.

— Dai

5

Dengan tidak menggunakan banyak dengan yang Anda pilih? :)

— GordonM

5

@GordonM ya benar-benar: PI sedang mencari yang sama hari ini karena saya ingin beberapa item ditampilkan (yang tersirat dengan multipleatribut) tanpa benar-benar dapat memilih banyak. Lupa bahwa atribut untuk melakukan ini dipanggil size, jadi jawaban teratas sangat membantu saya :)

— Luc

Saya pribadi memiliki beberapa bidang pilih di mana saya memiliki empat opsi dan saya ingin tiga opsi untuk dapat dipilih tetapi yang keempat perlu sendirian jika dipilih karena akan berbenturan dengan tiga lainnya (3 opsi dan "tidak ada ")

— RWolfe

281

Hanya saja, jangan menjadikannya beberapa pilihan, tetapi atur ukurannya, seperti:

  <select name="user" id="userID" size="3">
    <option>John</option>
    <option>Paul</option>
    <option>Ringo</option>
    <option>George</option>
  </select>

Contoh kerja: https://jsfiddle.net/q2vo8nge/

— Marcos Placona
sumber

Apakah mungkin untuk menghitung jumlah total atribut <option> secara terprogram?

— MyName

@ Natasha Anda bisa mendapatkan nilai bidang ukuran menggunakan jquery :-)

— Vladimir verleg

Info ukuran yang relevan: Menempatkan bagian selectdalam display: flexwadah, dan lakukan flex-grow: 1pada panel selectakan menyebabkannya diperlakukan size="3"sebagai ketinggian minimum, dan kemudian pasang tinggi keseluruhan pilih ke ukuran maksimum yang dimungkinkan dalam wadah Anda. jsfiddle.net/z1gypahs

— Torxed

25

Jika pengguna harus memilih hanya satu opsi sekaligus, hapus saja "beberapa" - buat pilihan normal:

  <select name="mySelect" size="3">
     <option>Foo</option>
     <option>Bar</option>
     <option>Foo Bar</option>
     <option>Bar Foo</option>
  </select>

Biola

— MacGucky
sumber

9

Mengapa Anda tidak ingin menghapus multipleatributnya? Seluruh tujuan atribut itu adalah untuk menentukan ke browser bahwa beberapa nilai dapat dipilih dari selectelemen yang diberikan . Jika hanya satu nilai yang harus dipilih, hapus atribut dan browser akan tahu untuk mengizinkan hanya satu pilihan.

Gunakan alat yang Anda miliki, itulah gunanya.

— David
sumber

1

ah. atribut ukuran berfungsi juga standalone. tidak memperhatikan. terima kasih

— simPod

6

@simPod alasannya adalah karena ada kalanya klien perlu melihat semua opsi di depannya, tetapi hanya dapat memilih 1 dari mereka. Sudah begitu lama sejak saya menulis html "asli", sehingga saya harus google / bing jawabannya ... Oh terima kasih surga untuk StackOverflow beberapa hari.

— Richard B

1

Anda hanya menginginkan satu opsi secara default, tetapi pengguna dapat memilih beberapa opsi dengan menekan tombol CTRL. Ini (sudah) persis bagaimana kelipatan SELECT dimaksudkan untuk berperilaku.

Lihat ini: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Bisakah Anda menjelaskan pertanyaan Anda?

— Cogicero
sumber

Ah, saya mengerti pertanyaannya sekarang, terima kasih kepada Marcos Placona. Pertanyaan awal tidak dijawab dengan baik.

— Cogicero

Meskipun saya pribadi berpikir itu "tidak adil" untuk pengalaman pengguna ketika Anda menunjukkan beberapa opsi pilih tetapi pengguna hanya dapat memilih satu.

— Cogicero

1

tergantung pada situasinya

— simPod

1

Saya datang ke sini setelah mencari google dan mengubah sesuatu di my-end.

Jadi saya hanya mengubah sampel ini dan itu akan berfungsi dengan jquery saat run-time.

$('select[name*="homepage_select"]').removeAttr('multiple')

http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/

— Ajay2707
sumber

4

Anda pada dasarnya melakukan apa yang dilakukan jawaban yang diterima, tetapi dengan cara yang berbelit-belit. Alih-alih menghapus beberapa atribut saat dijalankan, Anda bisa langsung menghapusnya dalam HTML. jsfiddle.net/3rkk6m9a

— Harry

1

<select name="flowers" size="5" style="height:200px">
 <option value="1">Rose</option>
 <option value="2">Tulip</option>
</select>

Solusi sederhana ini memungkinkan untuk memperoleh daftar opsi secara visual, tetapi untuk dapat memilih hanya satu.

— Ste
sumber

4

Selamat datang di SO. Silakan tambahkan deskripsi verbose

— Andriy Ivaneyko

1

Saya memiliki beberapa transaksi dengan select \ multi-select ini yang merupakan trik untuk saya

<select name="mySelect" multiple="multiple">
    <option>Foo</option>
    <option>Bar</option>
    <option>Foo Bar</option>
    <option>Bar Foo</option>
</select>

— Ewan
sumber

0

Terlambat untuk menjawab tetapi mungkin membantu orang lain, berikut adalah cara melakukannya tanpa menghapus atribut 'banyak'.

$('.myDropdown').chosen({
    //Here you can change the value of the maximum allowed options
    max_selected_options: 1
});

— DotNetFullStack
sumber

Catatan: Ini membutuhkan plugin jQuery Chosen: harvesthq.github.io/chosen

— smolo