我有以下 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 样式,因为克隆具有该属性,但这也不起作用。
这个想法是在元素之间切换并按需打开/关闭属性。
也许我在这里遗漏了一些东西,但我不确定是什么。有人可以帮我吗?
Note: I've deleted my previous post to avoid confusions, apologies about that!
最佳答案
问题是因为 replaceWith()
返回原始 jQuery 对象,该对象现在在替换元素时不包含任何元素。
在您的逻辑结构中,这意味着您无法从这些元素进行链接,并且需要开始调用附加元素,如下所示:
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.replaceWith(cond1_select);
$('#condition_value_1').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);
$cloned_cond1.removeAttr('style');
});
关于javascript - 链式方法调用不适用于原始元素或克隆元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40592736/