javascript - jQuery 多选列表框，其中 'None' 选项取消选择所有其他选项

Question

在这里摆弄:https://jsfiddle.net/q0o11c5e/17/

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

1. 选择“无”包含在所选内容的任何位置 => 仅“无” 被选中(其他任何内容都被关闭)
2. 取消选择任何其他项目 按住 Ctrl+单击，如果未选择任何其他内容，将自动 选择“无”。

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

1) 首先，对于 #2(完全按住 Ctrl+单击取消选择):流程根本不会进入 $( "#listbox").change(function() .您可以看到，因为如果您选择“A”，然后使用 Ctrl+单击取消选择它，则不会显示该函数顶部的警报。

2) 对于#1，如果选择在任何地方包含“None”(值“”)，我将创建一个空白数组，将“”插入其中，并将列表框 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;
        }
     });

   }


});

Answer 1

如果我的意图正确的话，会像下面这样吗？

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

只要没有选择任何值或选择了多个值(包括“无”)，这就会简单地设置选择

Fiddle