<SELECT multiple> - як дозволити вибраний лише один елемент?

134

У мене є <SELECT multiple>поле з декількома параметрами, і я хочу дозволити, щоб у нього було обрано одночасно лише один варіант, але користувач може тримати клавішу CTRL і обирати більше елементів одночасно.

Чи є спосіб, як це зробити? (Я не хочу видаляти "кілька").

html html-select

— simPod
джерело

5

Що? Чому? Це потребує більшого пояснення.

— Дай

5

Якщо ви не використовуєте декілька у вибраному? :)

— GordonM

5

@GordonM так: PI шукав те саме сьогодні, тому що я хотів показати кілька елементів (що мається на увазі з multipleатрибутом), не маючи можливості вибрати декілька. Забув, що атрибут для цього називався size, тому найкраща відповідь мені добре послужила :)

— Люк

У мене особисто є декілька полів вибору, де у мене є чотири варіанти, і я хочу, щоб можна було вибрати три варіанти, але четвертий повинен бути один, якщо вибраний, тому що він зіткнеться з іншими трьома (3 варіанти та "жоден" ")

— RWolfe

281

Просто не перетворюйте його на вибір декількох, а встановлюйте розмір, наприклад:

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

Приклад роботи: https://jsfiddle.net/q2vo8nge/

— Маркос Плакона
джерело

Чи можливо програмно підрахувати загальну кількість атрибутів розміру <option>?

— MyName

@Natasha Ви можете отримати значення поля розміру за допомогою jquery :-)

— Vladimir verleg

Інформація, що стосується розміру: Якщо selectрозмістити display: flexконтейнер усередині контейнера і зробити його flex-grow: 1за selectзаповітом, це спричинить його size="3"як мінімальну висоту, а потім оснастіть висоту всього вибору до максимально можливого розміру в контейнері. jsfiddle.net/z1gypahs

— Тортується

25

Якщо користувач повинен вибрати лише один варіант одночасно, просто видаліть "кілька" - зробіть звичайний вибір:

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

Скрипка

— МакГукі
джерело

9

Чому ви не хочете видалити multipleатрибут? Вся ціль цього атрибута полягає в тому, щоб вказати браузеру, що з даного selectелемента може бути вибрано кілька значень . Якщо потрібно вибрати лише одне значення, видаліть атрибут, і браузер буде знати, що дозволити лише один вибір.

Використовуйте інструменти, які у вас є, саме для цього вони і призначені.

— Девід
джерело

1

ах. атрибут size працює також окремо. не помітив. спасибі

— simPod

6

@simPod міркування тому, що є випадки, коли клієнтам потрібно бачити всі варіанти перед собою, але вони можуть вибрати лише 1 з них. З давніх пір я написав "справжній" html, що мені довелося гугл / bing відповідь ... О дякую небо за StackOverflow кілька днів.

— Річард Б

1

За замовчуванням потрібно лише один варіант, але користувач може вибрати кілька варіантів, натиснувши клавішу CTRL. Це (вже) саме те, як має поводитися SELECT кратний.

Дивіться це: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Чи можете ви уточнити своє запитання?

— Cogicero
джерело

Ауу, я розумію питання зараз, завдяки Маркосу Плаконі. Початкове запитання не було чітко сформульовано.

— Cogicero

Хоча я особисто вважаю, що це "несправедливо" щодо досвіду користувача, коли ви показуєте кілька варіантів вибору, але користувач може вибрати лише один.

— Cogicero

1

залежить від ситуації

— simPod

1

Я приїжджаю сюди після пошуку google і міняю річ у своєму кінці.

Тому я просто змінюю цей зразок, і він буде працювати з jquery під час виконання.

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

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

— Аджай2707
джерело

4

Ви в основному робите те, що робить прийнята відповідь, але перекрученим способом. Замість того, щоб видаляти кілька атрибутів під час виконання, ви можете просто безпосередньо видалити його в HTML. jsfiddle.net/3rkk6m9a

— Гаррі

1

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

Це просте рішення дозволяє візуально отримати список варіантів, але мати можливість вибрати лише один.

— Сте
джерело

4

Ласкаво просимо до SO. Будь ласка, додайте багатослівний опис

— Андрій Іванейко

1

У мене були справи з вибором \ multi-select. Це те, що зробило для мене фокус

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

— Еван
джерело

0

Пізно відповідати, але може допомогти комусь іншому, ось як це зробити, не видаляючи атрибут "кілька".

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

— DotNetFullStack
джерело

Примітка. Для цього потрібен плагін jQuery Chosen: warehq.github.io/chosen

— smolo