Adding two identical select2 forms to same page
javascript, jquery, jquery-select2, ruby-on-rails, ruby-on-rails-4
Solution
You can not have two elements with the same `id`. Use classes instead.
Both your selects have `id="e9"` instead try adding something like `class="my-select"` to your `<select>` element.
then do `$('.my-select').select2();`
Problem
I am trying to add two select2 multi-value select boxes to my Rails app. The top form works fine, but the bottom one does not work. I experimented with changing ids and adding new js code, but no success. Is there something fundamentally wrong that I'm missing? Index.html ``` # This one works fine <div class="search_genre">Genre:</div> <div class="select2-container select2-container-multi populate"> <select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select"> <optgroup label="Popular"> <option value="Alt">Rock</option> <option value="Ind">Indie</option> <option value="Ind">Alternative</option> <option value="Ind">Acoustic</option> </optgroup> </select> </div> # This one doesn't show a text input or the optiongroup values <div class="search_region">Region:</div> <div class="select2-container select2-container-multi populate"> <select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select"> <optgroup label="Local"> <option value="PDX">Greater Portland</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> </select> </div> ``` application.js ``` $("#e9").select2(); ```