Javascript 我怎样才能使HTML多选像控制按钮总是被按下一样

我有一个我正在开发的web应用程序，它需要一个HTML多选元素，就像一直按住控制键一样。即，单击某个选项将切换是否选中该选项

我尝试了各种Jquery事件绑定，但似乎在Jquery绑定事件触发之前执行了标准HTML multiple select行为，这使得截取事件和修改标准行为几乎不可能

---

如何使单个单击将切换一个单独选项的选择？

您可能需要考虑一个更简单的解决方案，比如使用一个DIV中的复选框的列表，该DIV的溢出属性设置为滚动。那对你来说可能更好。让一个下拉列表来完成你的要求有点复杂

请参见以下示例：

标签{显示：块；} 容器{高度：100px；宽度：200px；溢出：滚动；} 选择1 选择2 选择3 选择4 备选案文5 备选案文6 备选案文7 备选案文8 备选案文9 选择10 备选方案11 备选案文12

---

试试这个。可以将选项值存储在对象中，然后使用单击操作更新对象，然后将更改应用于选择

演示

HTML

---

我必须自己解决这个问题，并注意到属性和设置，所以对select元素进行了覆盖，效果很好

jsFiddle： 注意：此代码通过替换DOM中的select元素来修复错误行为。这有点冒险，会破坏您可能附加到元素的事件处理程序

window.onmousedown=函数e{ var el=e.target； 如果el.tagName.toLowerCase=='option'&&el.parentNode.hasAttribute'multiple'{ e、 防止违约； //切换选择 如果el.hasAttribute'selected'el.removeAttribute'selected'； else el.setAttribute'selected'； //黑客纠正错误的行为 var select=el.parentNode.cloneNodetrue； el.parentNode.parentNode.replaceChildselect，el.parentNode； } } 从…起 地点 地点 地点 地点 地点 地点 地点 地点 地点

---

上述解决方案都有一个主要的缺点，就是不支持复选框中的选择，这实际上就是我首先使用-box而不是复选框输入的原因。最初我访问这个页面是为了找到一种内置的方法来解决这个问题，但是考虑到上面的答案，我将只编写自己的代码

下面的代码还有一个优点，即它不会在mouseup上更新，而不是在iambriansreed当前的顶级答案上更新，而是在mousedown上更新，这是浏览器中的默认行为

为了帮助未来的谷歌用户，我的代码如下：

//版权c 2018 Joey TJE50。版权所有。 //此代码在GNU GPL3+下获得许可；看见 //源代码和最新版本： // https://gist.github.com/Joeytje50/2b73f9ac47010e7fdc5589788b80af77 //选择[from，to]范围内的'sel'中的所有选项 //将其状态更改为选择状态。选项[from]处于， //即，将其更改为第一个选定元素的当前状态 功能选择RangeSel、from、to{ var toState=sel.options[from]。已选中； //确保从<到： 如果从>到{ var-temp=来自； 从=到； to=温度； } 如果！选择HtmlSelect元素的实例{ 抛出新的TypeError'selectRange需要一个非jQuery select元素作为第一个参数'； } //取消选择每个元素

---

对于var i=from；我能分享你尝试过的东西吗？你不能。选择框和多个选择框是OS控件。你可以使用无序列表或其他东西创建你自己的类似选择框的对象，然后使用JS从选择框填充它，并将选择从它转移回选择框。然后，你可以做任何事情你喜欢它。如果符合你的要求就试试可能这是一个很好的解决方案。我尝试了更多，但有点奇怪，单击后，列表会滚动回顶部。在有很多选项的长选择上，它真的很奇怪。我在下面的回答中对此想法做了一个更完善的版本，它还支持按住shift键并拖动选择在IE中一点作用都没有的部分S.aaaa和样本1001。更好的解决方案是：

<select class="select-toggle" multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>​

$('.select-toggle').each(function(){    
    var select = $(this), values = {};    
    $('option',select).each(function(i, option){
        values[option.value] = option.selected;        
    }).click(function(event){        
        values[this.value] = !values[this.value];
        $('option',select).each(function(i, option){            
            option.selected = values[option.value];        
        });    
    });
});​