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

【问题标题】：Adding two identical select2 forms to same page将两个相同的 select2 表单添加到同一页面
【发布时间】：2014-05-21 17:30:40
【问题描述】：

我正在尝试将两个 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();

【问题讨论】：

希望这只是一个剪切/粘贴错误，但您的三个选项具有相同的值“这个工作正常”代码 sn-p。 value="Ind"x3
试试这个stackoverflow.com/a/65194682/8919282

标签： javascript jquery ruby-on-rails ruby-on-rails-4 jquery-select2

【解决方案1】：

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

您的两个选择都有id="e9"，而是尝试将class="my-select" 之类的内容添加到您的<select> 元素中。

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

【讨论】：

【解决方案2】：

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

data-select2-id="Project"

和

data-select2-id="WBSDate"

【讨论】：

谢谢。它帮助了我。我正在为此寻找几天。但对我来说有些不同，我有相同的 id。所以我更改了 id 并且它的工作正常。

【解决方案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>

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

【讨论】：

【解决方案4】：

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

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

我希望 SO 允许您删除答案。

【讨论】：

【解决方案5】：

使用相同的 data-select2-id 属性解决问题。

MVC 输入助手抛出连字符的语法错误，用下划线替换连字符，然后敬礼。

@Html.ListBoxFor(x => x.WIds, WList, new { @class = "form-control opWflWafers", @multiple = "multiple", data_select2_id=identicalname })

【讨论】：