javascript - Uncaught TypeError: Cannot read property 'join' of null - Stack Overflow

admin管理员组

文章数量:1287809

I am using the following code to join the values of selectbox and add them to the textbox

$(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');
});

and my HTML Code is Like

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

I don't know what's wrong but I am getting an error in my console as 'Uncaught TypeError: Cannot read property 'join' of null '

And this is still working in both application & JSFiddle but it changed the plete CSS properties of the selectbox.

If I ment either $('#cuisineslisting').val($('#ascuisines').val().join()); or $('#featureslisting').val($('#asfeatures').val().join()); then the CSS gets activated perfectly.

I am using the following code to join the values of selectbox and add them to the textbox

$(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');
});

and my HTML Code is Like

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

I don't know what's wrong but I am getting an error in my console as 'Uncaught TypeError: Cannot read property 'join' of null '

And this is still working in both application & JSFiddle but it changed the plete CSS properties of the selectbox.

If I ment either $('#cuisineslisting').val($('#ascuisines').val().join()); or $('#featureslisting').val($('#asfeatures').val().join()); then the CSS gets activated perfectly.

• javascript
• jquery

Share Improve this question Follow edited Aug 30, 2014 at 6:03 therealrootuser 10.9k99 gold badges3333 silver badges4646 bronze badges asked Aug 30, 2014 at 5:21 Karthik MallaKarthik Malla 5,8201414 gold badges5151 silver badges9191 bronze badges 1

• What CSS are you talking about? – Felix Kling Commented Aug 30, 2014 at 5:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

From the .val() documentation:

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.

Assuming that "none selected is okay",

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

(Which utilizes the fact that the short-circuit || operator yields the first true-thy value of the operands.)

本文标签： javascriptUncaught TypeError Cannot read property 39join39 of nullStack Overflow