Question

我正在尝试向我的Rails应用添加两个select2 multi-value select boxes。

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

我尝试更改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

@Ramy提及。我希望它对每个人都有效。如果它不起作用，请尝试此操作。在选择框中，您不能使用相同的ID作为示例：

       <select class="form-control select2" id="select">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>
        <select class="form-control select2" id="select">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>

如果您具有相同的ID，则搜索框将无法使用。只需尝试使用如下所示的其他ID名称即可。

       <select class="form-control select2" id="select">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>
        <select class="form-control select2" id="select1">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>

我遇到了这类问题。这就是为什么我在这里分享我的观点的原因。谢谢，希望有人能从中获得帮助。

Answer 4

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

id都是一样的。这对我来说似乎很奇怪，并且是我改变的第一件事，看它是否会起作用。我向id.e10的application.js添加了一个新的jquery代码，并相应地更改了第二个表单的id。昨天，这没有用。然而，今天它确实如此。我一定错过了一些愚蠢的东西，比如保存页面......

我希望你能删除答案。

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

4 个答案: