javascript - 未捕获的类型错误 : Cannot read property 'join' of null

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>

我不知道出了什么问题，但我在控制台中收到错误消息“未捕获的类型错误:无法读取 null 的属性‘join’”

这在应用程序和 JSFiddle 中仍然有效，但它改变了选择框的完整 CSS 属性。

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

Answer 1

来自.val()文档:

In the case of select elements, it returns null when no option is selected and an array containing the value of each selected option when there is at least one and it is possible to select more because the multiple attribute is present.

假设“none selected is okay”，

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

(它利用了短路 || 运算符产生操作数的第一个真实值这一事实。)