Question

我的网页上有一个多选下拉菜单和一个复选框，允许用户选择列表中的所有项目。

<select id="itemsList" multiple="true" size="3"></select>
<input type="checkbox" id="bSelectAll" onclick="selectAllItems();" />Select all

单击该复选框可选择列表中的所有项目。现在，当我单击列表中的某个项目时，该项目将保持选中状态，同时取消选择其他所有项目。我想要完全相反的行为。单击某个项目时，该项目应取消选中，而其他所有项目应保持选中状态。

我知道我们可以通过按住Ctrl键并单击某个项来获得此行为。但是，要求是它应该在正常点击时发生。

我试图检查一个选项标签，但似乎它不符合标准，因此只有一部分浏览器支持。

我无法通过使用select标签的onclick和onchange事件来实现这一点。

未选中复选框时，行为应保持一致。简而言之，单击选项标签应始终切换其选择。

如果我使用复选框列表而不是选择框，这将是默认行为。但是，有什么方法可以用我现在的方式做到这一点吗？

Answer 1

实现此目的的一种方法是使用数组来记录已选择/取消选择的内容，并在每次用户单击时重建您的选项。

JS：

var record = [];

var selectAllItems = function (target) {
    //toggle all options here and keep a record in "record" array ...
}

var doTheMagic = function(target){
    record[target.selectedIndex] = ! record[target.selectedIndex];
    rebuildOptions();

}

var rebuildOptions = function (){
    var itemsList = document.getElementById('itemsList');
    for (var i=0;i<record.length;i++){
            itemsList.options[i].selected = record[i];
    }

}

HTML：

<select id="itemsList" multiple="true" size="3"  onclick="doTheMagic(this)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="audi">Audi</option>
</select>
<input type="checkbox" id="bSelectAll" onclick="selectAllItems(this)" />Select all

jsFiddle演示：http://jsfiddle.net/3A9Xs/3/

Answer 2

此代码段使用onclick，也适用于较旧的IE。

在IE selectedIndex中，始终返回select的第一个找到的选定索引，而不是用户选择的索引。修复是缓存select的当前值，它在函数的开头是实际选择的值。 IE在迭代期间更改了该值，这就是需要缓存的原因。

var select = document.getElementById('select'),
    toggle = document.getElementById('toggle'),
    options = select.options,
    selections = [],
    selectOption = function (e) {
        var n,
            target = e.target || e.srcElement,
            currentValue = target.value;
        for (n = 0; n < options.length; n++) {
            if (currentValue === options[n].value) { // or options[n].text, if values are not defined
                selections[n] = !selections[n];
            }
            options[n].selected = selections[n];
        }
    },
    toggleAll = function () {
        var n, bool = this.checked;
        for (n = 0; n < options.length; n++) {
            options[n].selected = bool;
            selections[n] = bool;
        }
    },
    n;
for (n = 0; n < options.length; n++) {
    selections.push(options[n].selected);
}
if (select.addEventListener) {
    select.addEventListener('click', selectOption);
    toggle.addEventListener('click', toggleAll);
} else {
    select.attachEvent('onclick', selectOption);
    toggle.attachEvent('onclick', toggleAll);
}

A live demo at jsFiddle

解决选项标签的onclick事件

2 个答案: