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

我有一个带有多个选项的

字段，我想允许它同时只选择一个选项，但用户可以按住CTRL键并一次选择更多项目

---

有办法吗？（我不想删除“multiple”）。

为什么不删除

multiple

属性？该属性的全部用途是向浏览器指定可以从给定的

select

元素中选择多个值。如果只应选择一个值，请删除该属性，浏览器将知道只允许一个选择

---

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

只是不要将其设置为“选择倍数”，而是为其设置一个大小，例如：

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

约翰
保罗
林戈
乔治

工作示例：

---

如果用户一次只选择一个选项，只需删除“多个”-进行正常选择：

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

福
酒吧
富吧
巴福

---

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

见此：

---

你能澄清一下你的问题吗？

我是在搜索了谷歌之后来到这里的，我这边做了一些改变

所以我只是更改了这个示例，它将在运行时与jquery一起工作

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

---

我与select\multi-select有过一些交易 这就是我玩的把戏

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

福
酒吧
富吧
巴福

玫瑰
郁金香

---

这个简单的解决方案可以直观地获得选项列表，但只能选择一个。

回答得晚，但可能会帮助其他人，下面介绍如何在不删除“多个”属性的情况下完成此操作

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

---

什么？为什么？这需要更多的解释。请不要在选择时使用“多个”：@GordonM yeah totally:P我今天也在寻找相同的项目，因为我希望显示多个项目（这与

multiple

属性有关），而实际上无法选择多个项目。忘记了要执行此操作的属性名为

size

，因此顶部的答案对我很有用：）我个人有一个选择多个字段，其中我有四个选项，我希望其中三个选项能够被选择，但如果选择，则第四个需要单独，因为它会与其他三个（3个选项和一个“无”）冲突我现在明白这个问题了，多亏了马科斯·普莱科纳。最初的问题措辞不好。虽然我个人认为当你显示多个选择选项时对用户的体验“不公平”，但用户只能选择一个。啊。“大小”属性也可以独立工作。我没注意到。thanks@simPod理由是，有时客户需要看到面前的所有选项，但只能选择其中的一个。我已经很久没有写“真正的”html了，所以我不得不用谷歌/bing搜索答案。。。哦，感谢老天爷让你有些日子过得很好。你基本上是在做公认的答案所做的事情，但这是一种令人费解的方式。您可以直接在HTML中删除多属性，而不是在运行时删除多属性。欢迎来到SO。请添加详细说明是否可以通过编程方式计算大小属性的总数？@Natasha您可以使用jquery:-）大小相关信息：将

选择
放在
显示：flex
容器中，并在
select
上执行
flex grow:1
将使其将
size=“3”
视为最小高度，然后将整个select的高度捕捉到容器中可能的最大尺寸。注意：这需要jQuery选择的插件：
$('.myDropdown').chosen({
    //Here you can change the value of the maximum allowed options
    max_selected_options: 1
});