javascript - 表单提交后显示隐藏内容

Question

我有一个表单，如果我在选择标签中选择一个选项，则会显示一些内容。问题是，如果我提交表单并且出现错误，内容现在会被隐藏。

我阅读了相关主题，其中提到了本地存储，但我不知道如何实现它。

这是我的示例脚本。谢谢

脚本

<script type="text/javascript">
  $(document).ready(function(){
    $('#loc_type1').on('change', function() {
      if ( this.value == '11')
      {
        $("#services11").show();
        $("#services13").hide();
        $("#services14").hide();
      }
      else if ( this.value ==  '13') {
        $("#services13").show();
        $("#services11").hide();
        $("#services14").hide();
      }
      else if ( this.value ==  '14') {
        $("#services14").show();
        $("#services11").hide();
        $("#services13").hide();
      }
      else
      {
        $("#services11").hide();
        $("#services13").hide();
        $("#services14").hide();
      }
    });
});
</script>

Answer 1

您的脚本仅在值更改时运行，您可能也需要在页面加载时运行它。

// Make it a function
function updateVisibleServices(){
    if ( this.value == '11'){
        $("#services11").show();
        $("#services13").hide();
        $("#services14").hide();
    }
    else if ( this.value ==  '13') {
        $("#services13").show();
        $("#services11").hide();
        $("#services14").hide();
    }
    else if ( this.value ==  '14') {
        $("#services14").show();
        $("#services11").hide();
        $("#services13").hide();
    }
    else {
        $("#services11").hide();
        $("#services13").hide();
        $("#services14").hide();
    }
}

$(document).ready(function(){
    // Add the event
    $('#loc_type1').on('change', updateVisibleServices);
    // and also call it on page load
    updateVisibleServices();
});