Question

我正在使用jQuery在多选中注册更改事件，以在多选中下方的span元素中显示所选值。在选择和取消选择列表中的元素时，change事件会激活，除非我取消选择最后选择的元素。

以下是一个示例（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单击取消选择最后一项时，我希望更改事件触发，jquery val（）返回一个空数组。相反，在取消选择最后一个选定项目的情况下，似乎根本没有触发更改事件。

Answer 1

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

更改事件触发，但是当没有选择任何元素时，jquery val（）返回“null”，而不是空数组。只需与null进行比较即可使其正常工作：

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

Answer 2

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

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

取消选择最后一个项目时，多个<select>更改事件未触发</select>

2 个答案: