1

我有一个多选元素，第一个元素有一个类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/

4

2 回答 2

3

您应该在此处使用委托，因此当动态添加元素时，委托的处理程序仍然有效。顺便说一句，元素选择器被过滤为委托级别，因此您切换类的逻辑受到尊重：

{重构您的代码并使用 .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");    

});
于 2013-05-11T11:24:55.143 回答
1

事件处理程序附加到绑定处理程序时存在的元素，稍后更改元素类不会将事件处理程序附加到该元素。您可以使用已经附加到元素的 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');
});

小提琴

于 2013-05-11T11:29:14.977 回答