我怎样才能让HTML多重选择行为像控制按钮一直按住 [英] How can I make an HTML multiple select act like the control button is held down always

问题描述

我有一个正在处理的Web应用程序，需要一个HTML多选元素，其操作方式与控制键始终保持一致。即点击一个选项会切换它是否被选中。

I have a web application I'm working on that requires a HTML multiple select element operates like the control key is held down at all times. I.e. click on an option will toggle whether it is selected or not.

我已经尝试过各种Jquery事件绑定，但是看起来标准的HTML多选行为在Jquery绑定之前执行事件发生，使得截取事件和修改标准行为几乎是不可能的。

I have tried various Jquery event binds but it appears that the standard HTML multiple select behavior executes before the Jquery bound event fires, making it all but impossible to simply intercept the event and modify the standard behavior.

我怎样才能让单点击切换个人选择选项？

How can I make is so that single clicks will toggle the selection of an individual option?

推荐答案

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

Try this out. You can store the option values in an object and use the click action to update the object then apply the changes to the select.

演示

http://jsfiddle.net/iambriansreed/BSdxE/

HTML

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

JavaScript

JavaScript

$('.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];        
        });    
    });
});​

这篇关于我怎样才能让HTML多重选择行为像控制按钮一直按住的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！