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

时间:2013-10-27 10:21:46

标签: javascript jquery html

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

问题:

  1. 尝试点击Select allDeselect all按钮几次,Select all停止工作。
  2. 即使Select all在视觉上停止工作,它仍然在dom中选择/取消选择。您可以使用firebug进行检查。
  3. 如果是在dom中选择/取消选择,为什么它为取消选择的元素提供了错误的计数?
  4. 注意:

    请按照以下小提琴的确切顺序查看我的问题。 点击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);
    });
    

1 个答案:

答案 0 :(得分:5)

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

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

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

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

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