Select2 JQuery不会使用add new selector by按钮更新Dom
Select2 JQuery不会使用add new selector by按钮更新Dom
提问于 2018-08-13 05:24:11
我正在使用selector2 (https://select2.org)，并且我有一个选择器来选择食物。我希望添加新的选择器与底部。我已经这样做了，但是当Dom刷新时，它显示了一个糟糕的选择器：up good selector and in down the new selector (the bad selector)
<div class="container">
<div class="row">
<!-- style="padding-top: 1rem; padding-left: 2rem" -->
<div class="col-sm-12">
<b>Food:</b>
<select id="selectpicker1" data-live-search="true" data-width="70%">
<option data-tokens="Hotdog" value="Hotdog">Hot Dog</option>
<option data-tokens="Burger" value="Burger">Burger</option>
<option data-tokens="Sugar" value="Sugar">Sugar</option>
<option data-tokens="Donut" value="Sugar">Donut</option>
</select>
<button id="b1" class="add-more btn-success" type="button" onclick="doFunction()" ;>+</button>
</div>
</div>
<div id="ss"></div>
<script>
function doFunction() {
$(ss).append
(
'<div class="row">' +
'<div class="col-sm-12">' +
'<b>Food:</b>' +
'<select id="selectpicker1" data-live-search="true" data-width="70%">' +
'<option data-tokens="Hotdog" value="Hotdog">Hot Dog<option>' +
'<option data-tokens="Burger" value="Burger">Burger</option>' +
'<option data-tokens="Sugar" value="Sugar">Sugar</option>' +
'<option data-tokens="Donut" value="Sugar">Donut</option>' +
'</select>' +
'<button id="b1" class="add-more btn-success" type="button" onclick="doFunction()";>+</button>' +
'</div>' +
'</div>'
);
}
</script>
</div>你有什么办法解决这个问题吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-13 05:47:13
您只需在您的逻辑之后调用select2函数：
<script>
function doFunction() {
$(ss).append
(
'<div class="row">' +
'<div class="col-sm-12">' +
'<b>Food:</b>' +
'<select id="selectpicker1" data-live-search="true" data-width="70%">' +
'<option data-tokens="Hotdog" value="Hotdog">Hot Dog<option>' +
'<option data-tokens="Burger" value="Burger">Burger</option>' +
'<option data-tokens="Sugar" value="Sugar">Sugar</option>' +
'<option data-tokens="Donut" value="Sugar">Donut</option>' +
'</select>' +
'<button id="b1" class="add-more btn-success" type="button" onclick="doFunction()";>+</button>' +
'</div>' +
'</div>'
);
// Here you can add the initialize
// Important be sure you insert the library select 2
// If is not the case you will get an error undefined select2()
$('select').select2();
}
</script>请注意，如果您不将select2应用于所有选择，则可以将select更改为任何其他选择器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51812984
复制相关文章
相似问题