使用jQuery有条件地删除和替换HTML表单

问题描述 投票:0回答:2

美好的一天,我正在试图弄清楚如何从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时,我希望该表单重新出现,并且应根据用户是否选择是/否来删除和替换该表单。请帮忙

jquery html
2个回答
0
投票

您需要将克隆的表单存储在更改处理程序之外。删除它后,下次调用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);
    }

  }
});

0
投票

从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);
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.