jquery multiselect:非选定选项的计数不起作用

Question

我试图在多选中未选中.但似乎有一些问题.请参阅小提琴了解更多..

问题:

1. 试着点击Select all和Deselect all按钮几次,并Select all停止工作.
2. 即使Select all停止在视觉上工作,它仍然在dom中选择/取消选择.你可以使用萤火虫来检查它.
3. 如果是在dom中选择/取消选择,为什么它为取消选择的元素提供了错误的计数？

注意:

请在下面的小提琴下按照这个确切的顺序查看我的问题.点击Select all,然后Deselect all ,然后再次Select all.此时DOM/Firebug显示选项被选中.但是当我按下计数时,我得到结果4的实例0.

目标:我不在乎它是否在视觉上进行选择,我的主要目的是获得正确计数未选择的选项,因为firebug显示"选项"正在被选中和取消选择.

JSFIDDLE: http ://jsfiddle.net/bababalcksheep/fgfdb/

HTML:

<button id="countdeselected">Count deselected</button>
<button id="selectall">select All</button>
<button id="deselectall">Deselect All</button>
<select name="languages[]" multiple="multiple" class="multiselect" id="languages" style=" ">
    <option value="ALB">Albania</option>
    <option value="DZA">Algeria</option>
    <option value="alfa">Custom1</option>
    <option value="beta">Custom2</option>
</select>
<ul id="status"></ul>

JS:

$("#countdeselected").click(function (event) {
    var dd = $("#languages option:not(:selected)").length
    $('#status').append($('<li>').text(dd));

});

$("#selectall").click(function (event) {
    $("#languages option").attr('selected', 'selected');
});
$("#deselectall").click(function (event) {
    $("#languages option").attr('selected', null);
});

Answer 1

属性和元素属性之间存在差异.属性是初始状态,属性是当前状态.

您正在设置选项的属性,该属性仅在元素没有要开始的属性时才有效.之后,属性接管并设置属性不再对当前状态产生影响.

如果要更改选择状态,则需要设置属性而不是属性:

$("#selectall").click(function (event) {
    $("#languages option").prop('selected', true);
});
$("#deselectall").click(function (event) {
    $("#languages option").prop('selected', false);
});

演示:http://jsfiddle.net/Guffa/fgfdb/3/