我有以下HTML:
<input type="text" id="condition_value_1" style="display: none" />
<button id="showme">Make Select2</button>
<button id="clickme">Make Input</button>
然后看看下面的jQuery:
$(function() {
var cond1 = $('#condition_value_1');
var cloned_cond1 = cond1.clone();
var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>';
$('#showme').click(function() {
cond1.removeAttr('style').replaceWith(cond1_select).select2({
placeholder: 'Select choice'
});
});
$('#clickme').click(function() {
if ($('#condition_value_1').hasClass('select2-hidden-accessible')) {
$("#condition_value_1").select2('destroy');
}
$('#condition_value_1').replaceWith(cloned_cond1).removeAttr('style');
});
});
您可以尝试上面的代码 HERE 。
现在,只要您点击#showme
,就应该删除attr样式,将原始元素替换为给定的元素并将其转换为Select2,最后一部分不起作用。
另一方面,如果你单击#clickme
,你应该销毁先前的Select2,用克隆元素替换#condition_value_1
并删除attr样式,因为克隆有该属性,但这不起作用
我们的想法是在元素之间切换,并根据需要打开/关闭属性。
也许我在这里遗漏了一些东西,但我不确定是什么。能帮到我吗?
答案 0 :(得分:1)
<强> Updated fiddle 强>
我建议使用容器然后追加您想要的元素,请查看下面的示例。
希望这有帮助。
$(function() {
var cond1 = $('#condition_value_1');
var cloned_cond1 = cond1.clone();
var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>';
$('#showme').click(function() {
$("#my-container").html(cond1_select);
$("#condition_value_1").select2({placeholder: 'Select choice',width:'100%'});
});
$('#clickme').click(function() {
if ($('#condition_value_1').hasClass('select2-hidden-accessible')) {
$("#condition_value_1").select2('destroy');
}
$("#my-container").html(cloned_cond1);
$("#condition_value_1").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<div id="my-container">
<input type="text" id="condition_value_1" name="condition_1" style="display: none" />
</div>
<button id="showme">Make Select2</button>
<button id="clickme">Make Input</button>
答案 1 :(得分:0)
问题是replaceWith
会返回删除的元素,而不是新元素。我建议采用不同的方式:
$(function() {
var cond1 = $('#condition_value_1');
var cloned_cond1 = cond1.clone().removeAttr('style');
var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>';
$('#showme').click(function() {
cond1.replaceWith(cond1_select);
$("#condition_value_1").select2({
placeholder: 'Select choice'
});
cond1 = $("#condition_value_1");
});
$('#clickme').click(function() {
if ($('#condition_value_1').hasClass('select2-hidden-accessible')) {
$("#condition_value_1").select2('destroy');
}
$('#condition_value_1').replaceWith(cloned_cond1);
cond1 = $('#condition_value_1');
});
});
请注意,在更换任何内容之前,我已从克隆中删除了该属性;这样,你不必担心它。
另请注意,在showme
点击处理程序中,我们会替换HTML,然后获取$("#condition_value_1")
的新挂钩。那是因为cond1
已不在DOM中,因为您已将其替换为第一行中的HTML。
同样,在clickme
点击处理程序中,您需要重置cond1
的值以匹配新的HTML。