jQuery 根据选择选项保持显示隐藏状态

我根据下拉列表中选择的选项下拉选择并显示隐藏其他字段（在 div 内）。

此代码工作正常并根据选择显示隐藏，但当我加载页面时，所有字段都是可见的。

其他事情是，例如，如果我想在选择选项 2 的情况下显示字段并将该选项保存到数据库，并且在重新加载页面时，它不会根据所选选项保存显示隐藏状态。

HTML

<select id="row1_layout_options" name="row1_layout_options">
    <option value="Select Layout Type">Select Layout Type</option>
    <option value="layout_type1">layout_type1</option>
    <option value="layout_type2">layout_type2</option>
    <option value="layout_type3">layout_type3</option>
    <option value="layout_type4">layout_type4</option>
    <option value="layout_type5">layout_type5</option>
    <option value="layout_type6">layout_type6</option>
    <option value="layout_type7">layout_type7</option>
    <option value="layout_type8">layout_type8</option>
</select>

<div id="row1_col1_layout_type2">
    <input type="text" class="qa-form-tall-text" value="" name="q2am_fp_row1_col1_layout_type2">
</div>

Jquery

$('#row1_layout_options').change(function() {
   $('#row1_col1_layout_type1, #row1_col1_layout_type2, #row1_col1_layout_type3').hide();
   $('#row1_col1_' + $(this).val()).show();
});

那么，我如何编写脚本，其中所有字段在页面加载时隐藏，但它将根据所选选项保持显示隐藏状态。

为保存内容的所有 div 分配一个公共类

根据选择显示隐藏，但是当我加载页面时，所有字段都是 可见的

<div id="row1_col1_layout_type2" class="content">
                                        ^
                                        ----- This to target with a single selector

CSS

.content{
   display :none;
}

并且在JS只需触发更改事件即可显示带有所选选项的div

$('#row1_layout_options').change(function() {
   $('.content').hide();
   $('#row1_col1_' + $(this).val()).show();
   // Sen d an ajax request to save the value in DB
   $.ajax({

   });
}).change();  <--- Trigger the event

接下来是页面重新加载。网络是stateless。所以它不会记住之前的状态。您唯一能做的就是在页面刷新后保留该值。也许作为 cookie、本地存储或将其保存在服务器上并检索回来..检查小提琴