Cannot read property 'join' of undefined in jquery
<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>