<ВЫБРАТЬ несколько> - как разрешить выбор только одного элемента?


134

у меня есть <SELECT multiple> поле с несколькими опциями, и я хочу, чтобы в нем одновременно была выбрана только одна опция, но пользователь может удерживать клавишу CTRL и выбирать больше элементов одновременно.

Есть ли способ, как это сделать? (Я не хочу удалять «несколько»).


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 :-)
Владимир Верлег

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

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
ах. Атрибут размера работает также автономно. не заметил спасибо
simPod

6
@simPod, причина в том, что бывают случаи, когда клиенты должны видеть все варианты перед ними, но могут выбрать только один из них. Прошло так много времени с тех пор, как я написал «настоящий» html, что мне пришлось гуглить / отвечать на вопросы ... О, слава богу, что StackOverflow когда-то был.
Ричард Б

1

По умолчанию вам нужен только один вариант, но пользователь может выбрать несколько вариантов, нажав клавишу CTRL. Это (уже) именно так, как должен себя вести SELECT.

Смотрите это: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Не могли бы вы уточнить ваш вопрос?


Теперь я понимаю вопрос, благодаря Маркосу Плаконе. Первоначальный вопрос не был хорошо сформулирован.
Cogicero

Хотя я лично считаю, что это «несправедливо» по отношению к пользователю, когда вы показываете несколько вариантов выбора, но пользователь может выбрать только один.
Cogicero

1
зависит от ситуации
simPod

1

Я прихожу сюда после поиска в Google и изменить вещи в моем конце.

Так что я просто изменил этот пример, и он будет работать с jquery во время выполнения.

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

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


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
Добро пожаловать в ТАК. Пожалуйста, добавьте подробное описание
Андрей Иванейко

1

У меня были некоторые отношения с select \ 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
});

Примечание: для этого требуется плагин jQuery Chosen: Harbourhq.github.io/chosen
смоло
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.