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

Question

我正在尝试向我的 Rails 应用程序添加两个 select2 多值选择框。

顶部表格工作正常，但底部表格不起作用。

我尝试更改 ID 并添加新的 js 代码，但没有成功。我缺少什么根本性的错误吗？

索引.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>

应用程序.js

 $("#e9").select2();

原文由 Benjamin Dunphy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不能有两个具有相同 id 的元素。改用类。

您的两个选择都有 id="e9" 而不是尝试添加类似 class="my-select" 到您的 <select> 元素。

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

原文由 Ramy Nasr 发布，翻译遵循 CC BY-SA 3.0 许可协议