Question

在我创建的wordpress上，我使用下拉列表通过JQuery显示3个隐藏表单中的一个。

第一个问题是当表单无效时（即缺少字段，错误的电子邮件等），表单会重置页面，因此在您再次从下拉列表中选择该表单之前，所有内容都不再可见。

第二个是表单是插件，所以我不直接访问提交操作，如果我要插入插件文件，它可能会在不久的将来被更新覆盖。

HTML：

<div class="ginput_container ginput_container_select">
<select id="app_pick" class="medium gfield_select">
    <option value="">Choose Here</option>
    <option value="Greek_Dance">Greek Dance</option>
    <option value="Greek_School">Greek School</option>
    <option value="Youth_Group">Youth Group</option>
</select></div>

JQUERY：

    jQuery(document).ready(function($){

        $('#gform_wrapper_3').hide();


    $('#app_pick').on('change', function() {
  if ( this.value == ''){
    $('.f1').css('display', 'none');
     $('.f2').css('display', 'none');
      $('.f3').css('display', 'none');
  }
  else if ( this.value == 'Greek_Dance'){
    $('.f1').css('display', 'block');
     $('.f2').css('display', 'none');
      $('.f3').css('display', 'none');
  }
  else if ( this.value == 'Greek_School'){
    $('.f1').css('display', 'none');
     $('.f2').css('display', 'block');
      $('.f3').css('display', 'none');
  }
 else if ( this.value == 'Youth_Group'){
    $('.f1').css('display', 'none');
     $('.f2').css('display', 'none');
      $('.f3').css('display', 'block');
  }
else {
    $('.f1').css('display', 'none');
     $('.f2').css('display', 'none');
      $('.f3').css('display', 'none');
  }

});

    });

F1，F2，F3是相应的表格，默认为无显示。

我的目标是在下拉列表中选择表格显示：块;提交完成后。

Answer 1

我重构了你的解决方案，以摆脱if-else构造：

var form = localStorage.getItem('showForm');
if (form) {
  $('.' + form).show();
  $('#app_pick').val(localStorage.getItem('option'))
}

$('#app_pick').on('change', function() {
  var showForm;

  $('.f1, .f2, .f3').hide();

  switch (this.value) {
    case 'Greek_Dance':
      $('.f1').show();
      showForm = 'f1';
      break;
    case 'Greek_School':
      $('.f2').show();
      showForm = 'f2';
      break;
    case 'Youth_Group':
      $('.f3').show();
      showForm = 'f3';
      break;
  }
  localStorage.setItem('showForm', showForm);
  localStorage.setItem('option', this.value);
});

我在这里做的是将选定的值及其附带的表单保存到localStorage中，以便在页面重新加载时使用它。

<强> Example

在失败的表单提交上保持JQuery CSS设置

1 个答案: