title: Select2 is not applied to select element in rails, where do I find the missing link?
body: <p>Pages that helped me so far:</p>
  
  <ul>
  <li><a href="https://github.com/argerim/select2-rails" rel="nofollow noreferrer">https://github.com/argerim/select2-rails</a></li>
  <li><a href="https://stackoverflow.com/questions/43877283/rails-5-ask-as-taggable-with-select2">Rails 5 ask_as_taggable with select2</a></li>
  </ul>
  
  <p>Expected outcome:</p>
  
  <ul>
  <li>I get select2 to be applied to my select element. From that moment I'll start fixing things myself again.</li>
  </ul>
  
  <p>Actual outcome:</p>
  
  <ul>
  <li>Select2 is not applied to the select element.</li>
  </ul>
  
  <p>Steps I've taken so far: </p>
  
  <ol>
  <li>add it to gem, do bundle install. </li>
  <li>add <code>//= require select2</code> like this</li>
  </ol>
  
  <p>:</p>
  
  <pre><code>//= require jquery
  //= require jquery_ujs
  //= require bootstrap/modal
  //= require turbolinks
  //= require select2
  //= require_tree .
  </code></pre>
  
  <hr>
  
  <ol start="3">
  <li>added the require select2 and require select2-bootstrap to application.css</li>
  </ol>
  
  <p>:</p>
  
  <pre><code>*= require select2
   *= require select2-bootstrap
   *= require_tree .
   *= require_self
   */
  </code></pre>
  
  <ol start="4">
  <li>in my <code>name.html.erb</code> there is:</li>
  </ol>
  
  <p>:</p>
  
  <pre><code>&lt;%= f.label :tag_list, "Topics" %&gt;
  &lt;%= f.select(:tag_list, Tag.all.order(:name).collect { |a| a.name }, {}, id: "tag_list1", label:'Tags', :multiple =&gt; true)%&gt;
  </code></pre>
  
  <p>I've created a <code>Tag.rb</code> (data gets saved to the db):
  <code>
  class Tag &lt; ApplicationRecord
     validates_presence_of :name
  end
  </code></p>
  
  <ol start="5">
  <li>now the final step (from what I understand), I apply the functionality to the element (adding the code to <code>application.js</code> below the <code>//= require_tree .</code>):
  <code>
  $( "#dropdown" ).select2({
  theme: "bootstrap"
  });
  </code></li>
  </ol>
  
  <p>changed this to:</p>
  
  <p><code>
  $( "#tag_list1" ).select2({
      theme: "bootstrap"
  });
  </code></p>
  
  <p>Console:
  <code>Uncaught TypeError: $(...).select2 is not a function</code></p>
  
  <p>I solve this with:</p>
  
  <pre><code>(function($){
    $(document).on('ready', function(){
        $("#tag_list1").select2({
          theme: "bootstrap",
          tags: true
        });
    });
  }(jQuery));
  </code></pre>
  
  <p>Expected outcome:</p>
  
  <ul>
  <li>I get select2 to be applied to my select element. </li>
  </ul>
  
  <p>Actual outcome:</p>
  
  <ul>
  <li>Select2 is not applied to the select element.</li>
  </ul>
  
  <p>Please advise.</p>
  
  <hr>
  
  <p><strong>Update 1</strong>
  This is the html output:</p>
  
  <pre><code>&lt;input name="item[tag_list][]" type="hidden" value=""&gt;
  &lt;select id="tag_list1" label="Tags" multiple="multiple" name="item[tag_list][]"&gt;
    &lt;option value="12"&gt;dev tool&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>