Question

我使用以下代码加入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>

我不知道出了什么问题，但我在我的控制台中收到错误，因为'未捕获的TypeError：无法读取属性'加入'null'

这仍然适用于应用程序和JSFiddle但它改变了选择框的完整CSS属性。

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

Answer 1

来自.val()文档：

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

假设“没有选择是好的”，

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

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

未捕获的TypeError：无法读取属性＆＃39; join＆＃39;为null

1 个答案: