Question

我有一个多重选择元素，第一个元素有一个类sel-all和其他元素有sel-child

<select multiple="multiple">
    <option class="sel-all">All</option>
    <option class="sel-child">UsernameOne</option>
    <option class="sel-child">UsernameTwo</option>
    <option class="sel-child">UsernameThree</option>
    <option class="sel-child">UsernameFour</option>
</select>

我想要实现的目标，

当我点击sel-all元素时，应选择所有元素，并将值更改为Deselect All 将删除sel-all课程，并添加sel-del。

单击sel-all元素时，将取消选择所有元素选项及其自身。

现在......取消选择不起作用..

http://jsfiddle.net/ucBtL/1/

Answer 1

你应该在这里使用委托，所以当一个元素被动态添加时，处理程序委托仍然有效。顺便说一句，元素选择器被过滤为委托级别，因此您可以遵循切换类的逻辑：

{重构了你的代码并使用.prop（）而不是.attr（）来选择属性}

http://jsfiddle.net/ucBtL/3/

$('select').on('click','.sel-all',function(){
console.log("element is clicked");

    // select all sel-child element
    $(".sel-child").prop('selected', 'selected');
    // remove current selection on sel-all
    $(this).prop('selected', false).text('Deselect All').toggleClass("sel-del sel-all");    

});

$('select').on('click','.sel-del',function(){
console.log("element is clicked");

     // unselect all sel-child element
     $(".sel-child").prop('selected', false);
    // remove current selection on sel-all
     $(this).prop('selected', false).text('All').toggleClass("sel-all sel-del");    

});

Answer 2

事件处理程序附加到绑定处理程序时存在的元素，稍后更改元素类不会将事件处理程序附加到该元素。您可以使用已附加到元素的click函数，而不是将事件委托给父元素，并在两种状态之间切换：

$(".sel-all").on('click', function(){
    $(this).prop('selected', false)
           .toggleClass("sel-del sel-all") // you can remove this, not needed
           .text(function() {
                return $(this).text() == 'All' ? 'Deselect All' : 'All';
            }).siblings().prop('selected', $(this).text() != 'All');
});

FIDDLE

单击时多次选择不取消选择

2 个答案: