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

我正在使用以下代码连接selectbox的值并将它们添加到文本框中

$(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>

我不知道出了什么问题，但我在控制台中收到一个错误，名为“UncaughtTypeError:无法读取null的属性“join”

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

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

来自文档：

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

假设没有选择任何一个是可以的

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

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

来自文档：

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

假设没有选择任何一个是可以的

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

---

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

你在说什么CSS？你在说什么CSS？一行：$'cuisinslisting'。val$'ascuisines'。val |【】。join；一行：$'cuisineslisting'.val$'ascuisines'.val | |[]加入；