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

11dmarpk  于 2022-11-03  发布在  jQuery
关注(0)|答案(6)|浏览(166)

我正在尝试将两个select2 multi-value select boxes添加到我的Rails应用程序。
顶部的表单工作正常,但底部的表单不工作。
我尝试了改变id和添加新的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();
jyztefdp

jyztefdp1#

不能有两个元素具有相同的id。请改用类。
您的两个选择都有id="e9",请尝试将类似class="my-select"的内容添加到您的<select>元素。
然后执行$('.my-select').select2();

mctunoxg

mctunoxg2#

对于同一页中的每个select 2,必须为标记“data-select 2-id”定义唯一的id。

data-select2-id="Project"

data-select2-id="WBSDate"
fae0ux8s

fae0ux8s3#

作为@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>

我也遇到过这样的问题,所以我在这里分享了我的看法,谢谢,希望有人能从中得到帮助。

t5fffqht

t5fffqht4#

好吧,原来是一些根本性的东西!
两个id都是一样的。这对我来说很奇怪,这是我改变的第一件事,看看它是否能工作。我添加了一个新的jquery代码到id#e10的application.js中,并相应地改变了第二个表单的id。昨天,这没有工作。但是,今天它工作了。我一定是错过了一些愚蠢的事情,比如保存页面...
我希望SO允许您删除答案。

798qvoo8

798qvoo85#

使用相同的data-select 2-id属性可解决此问题。
MVC输入助手抛出连字符的sytax错误,用下划线替换连字符,然后敬礼。

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

0lvr5msh6#

$('#parentesco *').选择2({占位符:“选择病人”, AJAX :{网址:'ajax_paciente.php',数据类型:'json',延迟:250,处理结果:函数(数据){ return {结果:数据}; },缓存:false} });

相关问题