在同一页面中添加两个相同的select2表单

我正在尝试向我的Rails应用添加两个select2 multi-value select boxes。在同一页面中添加两个相同的select2表单

顶层表单工作正常，但底层表单无法正常工作。

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

来源

2014-05-21 Benjamin Dunphy

好了，这是一个根本的转变！

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

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

来源

2014-05-21 17:40:43

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

您的选择都有id="e9"，请尝试在您的<select>元素中添加诸如class="my-select"之类的内容。

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

来源

2014-05-21 17:41:21

在同一页面中添加两个相同的select2表单

回答

相关问题