jQuery多选:计数未选择的选项不起作用

jquery multiselect: count for non selected options not working

本文关键字：选择 选项 不起作用 多选 jQuery      更新时间：2023-09-26

>我正在尝试计数未在多选中选择。但似乎有一些问题。见 小提琴 了解更多信息..

问题：

  1. 尝试单击几次Select all和Deselect all按钮，Select all停止工作。
  2. 即使Select all在视觉上停止工作，它仍然在 dom 中选择/取消选择。您可以使用 firebug 进行检查。
  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);
});

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

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

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

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

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

相关文章：