<选择多个>-如何只允许选择一项？

134

我有一个<SELECT multiple>包含多个选项的字段，但我希望允许它一次只能选择一个选项，但是用户可以按住CTRL键并一次选择更多项。

有什么办法吗？（我不想删除“多个”）。

html html-select

— simPod
source

5

什么？为什么？这需要更多的解释。

— 戴

5

通过不与您选择使用多个？:)

— GordonM 2011年

5

@GordonM是的：PI今天一直在寻找相同的东西，因为我希望显示多个项目（该multiple属性暗含），而实际上却不能选择多个。忘记了执行此操作的属性已被调用size，因此最佳答案对我很有帮助:)

— 吕克（Luc）

我个人有一个“选择多个”字段，在该字段中有四个选项，我希望能够选择其中三个选项，但是如果选择了第四个，则第一个选项必须单独使用，因为它会与其他三个选项冲突（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/

— 马科斯·普拉科纳（Marcos Placona）
source

是否可以通过编程方式计算size属性中<option>的总数？

— MyName

@Natasha您可以使用jquery来获取size字段的值:-)

— 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>

小提琴

— 麦古基
source

9

您为什么不想删除该multiple属性？该属性的全部目的是向浏览器指定可以从给定select元素中选择多个值。如果仅应选择一个值，请删除该属性，浏览器将知道仅允许一个选择。

使用您拥有的工具，这就是它们的用途。

— 大卫
source

1

啊。size属性也可以独立使用。没注意到。谢谢

— simPod 2011年

6

@simPod的原因是，有时客户需要看到它们前面的所有选项，但只能选择其中之一。自从我写了“真实的” html以来已经很长时间了，以至于我不得不用google / bing的答案。。。

— 理查德B

1

默认情况下，您只需要一个选项，但是用户可以通过按CTRL键选择多个选项。这（已经）确实是SELECT倍数行为的方式。

看到这个：http : //www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

你能澄清你的问题吗？

— Cogicero
source

噢，感谢Marcos Placona，我现在明白了这个问题。最初的问题措辞不好。

— 2011年

尽管我个人认为显示多个选择选项对用户的体验“不公平”，但用户只能选择一个。

— Cogicero 2011年

1

视情况而定

— simPod

1

我在搜索谷歌并改变我的想法后来到这里。

因此，我只是更改了此示例，它将在运行时与jquery一起使用。

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

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

— Ajay2707
source

4

基本上，您正在做被接受的答案正在做的事情，但是以复杂的方式进行。除了在运行时删除Multiple属性，您可以直接在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
source

4

欢迎来到SO。请添加详细的描述

— 舍甫琴科Ivaneyko

1

我与选择处理了一些\多重选择，这就是我的诀窍

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

— 伊万
source

0

答案较晚，但可能会对其他人有所帮助，这是在不删除'multiple'属性的情况下的方法。

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

— 点网全栈
source

注意：这需要jQuery Chosen插件：Harvesthq.github.io/chosen

— smolo