title: Uncaught TypeError: Cannot read property 'join' of null
body: <p>I am using the following code to join the values of selectbox and add them to the textbox</p>
  
  <pre><code>$(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');
  });
  </code></pre>
  
  <p>and my HTML Code is Like</p>
  
  <pre><code>&lt;input type="text" name="cuisineslisting" id="cuisineslisting"&gt;
  &lt;select name="ascuisines" id="ascuisines" multiple="" class="chosen-select-width" required=""&gt;
      &lt;option value="" disable=""&gt;&lt;/option&gt;
      &lt;option value="African"&gt;African&lt;/option&gt;
      &lt;option selected="" value="American"&gt;American&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="text" name="featureslisting" id="featureslisting"&gt;
  &lt;select name="asfeatures" id="asfeatures" multiple="" class="chosen-select-width valid" tabindex="-1" required="" aria-required="true" aria-invalid="false"&gt;
      &lt;option value="" disable=""&gt;&lt;/option&gt;
      &lt;option value="Delivery"&gt;Delivery&lt;/option&gt;
      &lt;option value="BYOB"&gt;BYOB&lt;/option&gt;
      &lt;option value="Brunch"&gt;Brunch&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>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 '</p>
  
  <p>And this is still working in both application &amp; JSFiddle but it changed the complete CSS properties of the selectbox.</p>
  
  <p>If I comment either <code>$('#cuisineslisting').val($('#ascuisines').val().join());</code> or <code>$('#featureslisting').val($('#asfeatures').val().join());</code> then the CSS gets activated perfectly.</p>