jQuery多选列表框，其中“无”选项取消选择所有其他选项

jQuery Multi-Select Listbox where 'None' Option Deselects All Others

本文关键字：选项 取消 选择 其他 列表 其中 jQuery      更新时间：2023-09-26

>在这里小提琴：https://jsfiddle.net/q0o11c5e/17/

我有一个具有"无"的多选列表框，具有以下要求：

    选择
  1. "无"包含在选择中的任何位置 => 仅"无"已选中（其他任何内容均已关闭）
  2. 取消选择任何其他项目 使用 Ctrl+单击，如果未选择任何其他内容，将自动 选择"无"。

这是通过jQuery的Change函数实现的。我的问题：

1）首先，对于#2（完全Ctrl+单击取消选择）：流根本不进入$( "#listbox" ).change(function()。您可以看到这一点，因为如果选择"A"，然后通过 Ctrl+单击取消选择它，则不会显示函数顶部的警报。

2）对于#1，如果选择在任何地方都包含"None"（值"），我会创建一个空白数组，将"推到上面，然后将Listbox Val设置为它（并立即中断），但这不起作用。

$( "#listbox" ).change(function() {   
   alert('SelArray: ' + $('#listbox').val() +  '   Length: ' + $('#listbox').val().length);
   // If no selection, automatically select 'None'
   if ($('#listbox').val().length == 0) {
        alert('Nothing selected');
   }
   else
   {
     // If new selection includes empty ('None'), deselect any other active selections
     $.each($('#listbox').val(), function (index, value) {
        if (value == '') {
          alert('None selected, clearing anything else..');
          var noneOnly = {};
          noneOnly.push('');
          $('#listbox').val(noneOnly);
          return false;
        }
     });
   }

});

如果我理解正确，如下所示？ 

$( "#listbox" ).change(function() {   
   var arr=  $(this).val();
   if (arr == null || arr.length === 0 || (arr.length > 1 && arr[0] === ''))
        $(this).val(['']);
});

这仅设置在未选择任何值或选择多个值（包括"无"）时

选择。

小提琴

$("#listbox").on("input change", function() {
    if($(this).find("option[value='']:selected").length!=0 || $(this).find("option:selected").length==0) {
    $(this).find("option").attr("selected", false);
    $(this).find("option[value='']").attr("selected", true);
    return false;
  }
});

嗨，检查我上面的代码段，这是我的尝试 https://jsfiddle.net/q0o11c5e/22/

（

代表问题作者发布）。

现在解决了，最后的小提琴在这里：https://jsfiddle.net/q0o11c5e/23/

JS代码：

$( "#listbox" ).change(function() {   
   var arr=  $(this).val();
   if (arr == null || arr.length === 0 || (arr.length > 1 && arr[0] === '')) {
        $(this).val(['']);
   }   
   else
   {
     // If new selection includes empty ('None'), deselect any other active selections
     $.each(arr, function (index, value) {
        if (value == '') {
          var noneOnly = [];
          noneOnly.push('');
          $('#listbox').val(noneOnly);
          return false;
        }
     });
   }

});
相关文章：