javascript-将两个相同的select2表单添加到同一页面

我试图将两个select2 multi-value select boxes添加到我的Rails应用程序中.

顶部的形式可以正常工作,但底部的形式不起作用.

我尝试更改ID和添加新的js代码,但没有成功.我根本缺少什么错吗？

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();

解决方法:

您不能有两个具有相同ID的元素.改用类.

您的两个选择都具有id =“ e9”,而是尝试将class =“ my-select”之类的内容添加到< select>元件.

然后做$(‘.my-select’).select2();

标签：ruby-on-rails-4,jquery-select2,javascript,ruby-on-rails,jquery
来源： https://codeday.me/bug/20191029/1960698.html