title: Cannot read property 'join' of undefined in jquery
body: <p>My url link is like so <a href="http://localhost:50255/product/filter/manufacturer/3" rel="nofollow">http://localhost:50255/product/filter/manufacturer/3</a></p>
  
  <p>and on document load, i try to set the <code>manufacturer 3</code> value like so </p>
  
  <pre><code>$(window).load(function(){
      var pathname = window.location.pathname.split("/");
      var filter = pathname[pathname.length-3];
              if(filter === 'filter'){
                  var option = pathname[pathname.length-2];
                  var id = pathname[pathname.length-1];
                  $("#ManufacturerID").val(id).trigger("change");
              }
          });
  </code></pre>
  
  <p>but i get the error </p>
  
  <blockquote>
    <p>Cannot read property 'join' of undefined</p>
  </blockquote>
  
  <p>My html markup is</p>
  
  <pre><code>  &lt;div class="select2-container select2-container-multi js-example-basic-multiple col-sm-12" id="s2id_ManufacturerID" style="border: 1px solid rgba(0, 0, 0, 0.14902); display: block;"&gt;
           &lt;ul class="select2-choices"&gt;  
             &lt;li class="select2-search-field"&gt;    
             &lt;label for="s2id_autogen6" class="select2-offscreen"&gt;&lt;/label&gt;    
             &lt;input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input select2-default" id="s2id_autogen6" placeholder="" style="width: 1004px;"&gt;  
             &lt;/li&gt;
           &lt;/ul&gt;
         &lt;div class="select2-drop select2-drop-multi select2-display-none select2-drop-active"&gt;   
           &lt;ul class="select2-results"&gt;   
             &lt;li class="select2-no-results"&gt;No matches found&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;select id="ManufacturerID" class="js-example-basic-multiple col-sm-12" multiple="multiple" placeholder="Κατασκευαστές" style="border: 1px solid rgba(0, 0, 0, 0.14902); display: none;" tabindex="-1"&gt;
           &lt;option value="1"&gt;manufacturer 1&lt;/option&gt;
           &lt;option value="2"&gt;manufacturer 2&lt;/option&gt;
           &lt;option value="3"&gt;manufacturer 3&lt;/option&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>What am i doing wrong here?</p>
  
  <p><strong>UPDATE</strong> thanks to the comments, the error comes from the following function</p>
  
  <pre><code>$(function () {
              $('select').select2()
              .on("change", function (e) {
                  var id = '#sel' + $(this).attr("id");
                  var array = e.val.join(",");
                  $(id).val(array);
                  PostIt();
              })
          });
  </code></pre>