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

Question

我试图将两个select2多值选择框添加到我的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();

Answer 1

您不能同时具有两个元素id。改用类。

您的两个选择都id="e9"尝试class="my-select"在<select>元素中添加类似内容。

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

Answer 2

对于同一页面中的每个 select2，您必须为标签“data-select2-id”定义唯一的 id。

data-select2-id="Project"

和

data-select2-id="WBSDate"

Answer 3

好的，所以这是一些基本的东西！

两个id是一样的。这对我来说似乎很奇怪，这是我改变的第一件事，看看它是否有效。我向 application.js 添加了一个新的 jquery 代码，id 为 #e10，并相应地更改了第二个表单的 id。昨天，这不起作用。然而，今天却做到了。我一定错过了一些愚蠢的事情，比如保存页面......

我希望允许您删除答案。