Javascript jQuery多选列表框，其中'；无'；选项取消选择所有其他选项

在这里拉小提琴：

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

选择“无”包括选择中的任何位置=>仅包含“无” 已选中（其他任何选项均已关闭）

取消选择任何其他项目 在按住Ctrl键的同时单击，如果未选择任何其他选项，将自动 选择“无”

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

1） 首先，对于#2（完全按住Ctrl键并单击取消选择）：流不会进入

$（“#列表框”）.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" ).change(function() {   
   var arr=  $(this).val();
   if (arr == null || arr.length === 0 || (arr.length > 1 && arr[0] === ''))
        $(this).val(['']);
});

只要未选择任何值或选择多个值（包括“无”值），即可简单地设置选择

嗨，检查我上面的代码，这是我的尝试

您好，请检查我上面的代码，这是我的try（代表问题作者发布）

现在问题解决了，最后一把小提琴在这里：

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;
        }
     });

   }


});

（代表问题作者张贴）

现在问题解决了，最后一把小提琴在这里：

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;
        }
     });

   }


});

---

这只是一个小问题，与您的问题无关，但对我来说，选择“全部”意味着所有选项都应该被选择，如果选择“全部”视觉上选择“无”，我会感到困惑。更重要的是，如果取消选择所有选项，然后自动选择“全部”，感觉您描述的UI是违反直觉的。是的，我现在将其重命名。在您取消选择的代码中，看起来像

noneOnly

实际上是一个对象：

{}

。如果您将其更改为

[]

，取消选择应该会更好。非常感谢Andrew Myers，取消选择单个元素如何？只是一个小问题，与您的问题无关，但对我来说，选择“全部”意味着所有选项都应该被选择，如果选择“全部”则我会感到困惑，如果选择“全部”则视觉上选择“无”更重要的是，如果取消选择所有选项，然后自动选择“全部”，感觉您描述的UI是违反直觉的。是的，我现在将重命名它。看起来在您取消选择的代码中，

noneOnly

实际上是一个对象：

{}

。如果您将其更改为

[]

，取消选择应该会更好。非常感谢Andrew Myers，取消选择单个元素如何？