將兩個相同的 select2 表單添加到同一頁面

Question

我正在嘗試向我的 Rails 應用程序添加兩個select2 多值選擇框。

最上面的形式工作正常，但底部的形式不起作用。

我嘗試更改 ids 並添加新的 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();

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都是一樣的。 這對我來說似乎很奇怪，這是我改變的第一件事，看看它是否有效。 我向 application.js 添加了一個新的 jquery 代碼，id #e10 並相應地更改了第二個表單的 id。 昨天，這不起作用。 然而，今天它做到了。 我一定錯過了一些愚蠢的事情，比如保存頁面......

我希望允許您刪除答案。