美好的一天,我正在试图弄清楚如何从DOM中完全删除表单元素并在用户从下拉列表中选择“是”或“否”时将其替换回来。以下是我的HTML代码;
<label for="show_form"><?php _e('Show Form?', 'text-domain'); ?></label>
<select class="form-control" id="show_form" name="show_form">
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
<form id="co_form" method="post" action="">
<!-- My Form Codes here -->
</form>
我能够使用下面的jQuery代码删除表单;
jQuery(document).ready(function() {
jQuery('#show_form').on('change', yes_or_no_toggle);
});
function yes_or_no_toggle() {
var getYesNOSelect = jQuery("#show_form option:selected").val();
if ( getYesNOSelect == 'NO' ) {
var clone = $('#co_form').clone();
jQuery('#co_form').remove();
} else {
jQuery('body').append(clone);
}
}
不知道我做错了什么,但它删除了已经有效的形式但是当我选择YES时,没有任何反应
当用户选择YES时,我希望该表单重新出现,并且应根据用户是否选择是/否来删除和替换该表单。请帮忙
您需要将克隆的表单存储在更改处理程序之外。删除它后,下次调用yes_or_no_toggle()
时它不存在
尝试类似的东西:
jQuery(document).ready(function() {
// store clone on page load
var clone = $('#co_form').clone();
jQuery('#show_form').on('change', yes_or_no_toggle);
function yes_or_no_toggle() {
var getYesNOSelect = jQuery(this).val();
if (getYesNOSelect == 'NO') {
jQuery('#co_form').remove();
} else {
jQuery('body').append(clone);
}
}
});
从if块中取出克隆变量。下面的示例,它不在功能范围内,应该可以工作。
jQuery(document).ready(function() {
jQuery('#show_form').on('change', yes_or_no_toggle);
});
var formObj = $('#co_form').clone();
function yes_or_no_toggle() {
var getYesNOSelect = jQuery("#show_form option:selected").val();
if ( getYesNOSelect == 'NO' ) {
jQuery('#co_form').remove();
} else {
jQuery('body').append(formObj);
}
}