未捕获的TypeError：无法读取null的属性“ join”

Question

我正在使用以下代码来加入选择框的值并将其添加到文本框中

$(document).ready(function () {
    $('#ascuisines').on('change', function () {
       $('#cuisineslisting').val($('#ascuisines').val().join());
    }).trigger('change');
    $('#asfeatures').on('change', function () {
        $('#featureslisting').val($('#asfeatures').val().join());
    }).trigger('change');
});

我的HTML代码就像

<input type="text" name="cuisineslisting" id="cuisineslisting">
<select name="ascuisines" id="ascuisines" multiple="" class="chosen-select-width" required="">
    <option value="" disable=""></option>
    <option value="African">African</option>
    <option selected="" value="American">American</option>
</select>
<input type="text" name="featureslisting" id="featureslisting">
<select name="asfeatures" id="asfeatures" multiple="" class="chosen-select-width valid" tabindex="-1" required="" aria-required="true" aria-invalid="false">
    <option value="" disable=""></option>
    <option value="Delivery">Delivery</option>
    <option value="BYOB">BYOB</option>
    <option value="Brunch">Brunch</option>
</select>

我不知道出了什么问题，但是我在控制台中收到了一个错误，提示为“ Uncaught TypeError：无法读取null的属性'join'

而且这在应用程序和JSFiddle中都仍然有效，但是它更改了selectbox的完整CSS属性。

如果我发表评论，$('#cuisineslisting').val($('#ascuisines').val().join());或者$('#featureslisting').val($('#asfeatures').val().join());CSS被完美激活。

Answer 1

从.val()文档中：

对于select元素，如果没有选择任何选项，则返回null；如果存在至少一个，则返回包含每个选择的选项的值的数组，并且由于存在multi属性，因此可以选择更多值。

假设“没有选择是可以的”，

var selected = $('#ascuisines').val() || [];
$('#cuisineslisting').val(selected.join());

（这利用了短路||算子产生操作数的第一个“真”值的事实。）