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

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 :-)

— Владимир Верлег

Информация, относящаяся к размеру: размещение 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>

скрипка

— MacGucky
источник

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

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

— Cogicero

1

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

— simPod

1

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

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

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

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

— Ajay2707
источник

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>

Это простое решение позволяет визуально получить список опций, но иметь возможность выбрать только один.

— Ste
источник

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>

— Ewan
источник

0

Поздно, но может помочь кому-то еще, вот как это сделать, не удаляя атрибут «несколько».

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

— DotNetFullStack
источник

Примечание: для этого требуется плагин jQuery Chosen: Harbourhq.github.io/chosen

— смоло