Javascript 通过onclick事件加载后,select2标记框不工作
在我的页面中,有一个使用库的选择框。我只想在单击按钮后添加更多的选择框。为此,我尝试了以下代码:Javascript 通过onclick事件加载后,select2标记框不工作,javascript,jquery,html,select2,Javascript,Jquery,Html,Select2,在我的页面中,有一个使用库的选择框。我只想在单击按钮后添加更多的选择框。为此,我尝试了以下代码: <html> <head> <link rel="stylesheet" type="text/css" href="css/application.css"/> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/application.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.js"></script>
</head>
<body>
<div id="location_form">
<div class="form-group" style="margin-bottom: 50px;">
<label for="cat" class="col-sm-1 col-sm-offset-1">Category <span class="asterisk">*</span></label>
<div class="col-sm-10">
<select class="form-control input-transparent select2" id="cat" name="category" required="required" multiple="multiple" size="1" data-parsley-trigger="change">
<option style="margin-bottom: 1px;">Select Categories</option>
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
<option value="4">Opt 4</option>
</select>
</div>
</div>
</div>
<input type="button" id="addmore" value="Add More" />
<div class="locations"></div>
<script src="js/action-scripts.js"></script>
<script>
//----- tag loader --//
$(".select2").each(function(){
$(this).children().first().remove();
$(this).select2({
placeholder: "Select Categories",
maximumSelectionSize: 4
});
});
</script>
</body>
</html>
我的action-script.js如下所示:
// Add location 2
$('#addmore').click(function() {
index = Math.random();
var location_div = '<div class="location" id="location_' + index + '">';
location_div += $('#location_form').html();
location_div += '<hr class="col-sm-offset-1"></div>';
$('.locations').append(location_div);
});
所以,基本上我想做的是,一旦我的HTML页面中id为addmore的按钮被点击,我将把div中的所有内容都附加到
但是,问题是我在新的选择框中失去了select2库的所有功能。以下是我的JSFIDLE链接:
如果选中上面的JSFIDLE链接,您将看到单击AddMore按钮后出现的选择框不起作用。不管你在那里键入什么,它都不会从列表中给出任何建议
我对javascript的了解非常有限。我很难想出如何解决这个问题。非常感谢您的帮助
干杯你主要需要做两件事: 1从当前选择中删除id,因为您直接复制html。 2添加html后,在按钮单击事件处理程序中调用此函数
$(".select2").each(function(){
$(this).children().first().remove();
$(this).select2({
placeholder: "Select Categories",
maximumSelectionSize: 4
});
});
试试这个…我不能添加内联JSFIDLE,因为您的样式非常大
非常感谢你的回答。我试着按照你的指示在我的本地机器,但它似乎不工作。我发现了一些有线错误,比如没有为Select2 s2id_autogen1定义未捕获的查询函数。您能验证您提出的解决方案在JSFIDLE中是否有效吗?谢谢,这确实有效。我有这个问题,因为我把我的类命名为select2。我在这里找到了解决办法:@KamrulKhan这不是问题,我更新了你对这个类的处理方式,它很有效……为什么我的问题被投了反对票?
var index = 1;
$('#addmore').click(function() {
var _html = $('#location_form').clone(false);
_html.find(".select2").prev('.select2-container').remove();
var _id = 'location_' + index;
$('<div/>', {
class: 'location',
id: _id,
html: _html.html() + '<hr class="col-sm-offset-1"></div>',
}).appendTo('.locations').find('select.select2').select2({
placeholder: "Select Categories",
maximumSelectionSize: 4
});
index++;
});
$(".select2").children().first().remove();
$(".select2").select2({
placeholder: "Select Categories",
maximumSelectionSize: 4
});