我有以下 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 样式，因为克隆具有该属性，但这也不起作用。
这个想法是在元素之间切换并根据需要打开/关闭属性。
也许我在这里遗漏了一些东西，但我不确定是什么。有人可以帮我吗？
更新了小提琴.
我建议使用容器，然后将所需的元素附加到其中，请检查下面的示例。
希望这可以帮助。
$(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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
