取消选择最后一个项目时不会触发多个 <select> 更改事件答案

【问题标题】：multiple <select> change event not firing when last item is deselected取消选择最后一个项目时不会触发多个 <select> 更改事件
【发布时间】：2015-03-16 22:14:55
【问题描述】：

我正在使用 jQuery 在多选上注册一个更改事件，以在多选下方的 span 元素中显示所选值。选择和取消选择列表中的元素时，更改事件触发正常，除非我取消选择最后一个选择的元素。

这是一个示例 (see it in jsfiddle)：

<select id="multiselect" multiple>
    <optgroup label="Italian">
        <option value="CEI2008">CEI2008 — Conferenza Episcopale Italiana (2008)</option>
        <option value="LUZZI">LUZZI — Riveduta - Luzzi (1924)</option>
    </optgroup>
    <optgroup label="Latin">
        <option value="NVBSE">NVBSE — Nova Vulgata - Bibliorum Sacrorum Edition (1979)</option>
    </optgroup>
</select>
<div>Selected versions: <span id="selectedversions">none</span></div>

以及随附的 jquery 代码：

$('#multiselect').change(function(){
    var selecteditems = $(this).val();
    if(selecteditems.length===0){ $('#selectedversions').text('none'); }
    else{ $('#selectedversions').text(selecteditems.join(',')); }
});

当最后一个项目被 CTRL-click 取消选择时，我希望 change 事件触发并且 jquery val() 返回一个空数组。相反，在取消选择最后一个选定项目的情况下，似乎根本没有触发更改事件。

【问题讨论】：

标签： jquery select onchange multi-select deselect

【解决方案1】：

通过一些调试，我实际上找到了自己的答案。

change 事件确实会触发，但是当没有选择任何元素时，jquery val() 返回“null”，而不是空数组。与 null 进行比较就足够了：

$('#multiselect').change(function(){
    var selecteditems = $(this).val();
    if(selecteditems===null){ $('#selectedversions').text('none'); }
    else{ $('#selectedversions').text(selecteditems.join(',')); }
});

【讨论】：

【解决方案2】：

对我来说，由于互联网连接不佳，jQuery 没有正确加载。如果您有同样的问题，请使用DOM level。

$(document).on('change','#multiselect',function() {
    var value = $('#multiselect').val();
    alert(value);
});

【讨论】：