Question

我根据下拉列表中选择的选项下拉选择并显示隐藏其他字段（在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();
});

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

Answer 1

为包含内容的所有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

接下来是Page Reload。网络是stateless。所以它不会记住以前的状态。您唯一能做的就是在页面刷新后保留该值。也许在作为cookie，本地存储或将其保存在服务器上并将其检索回来。的 Check Fiddle

Answer 2

在document.ready

中执行相同的操作

$(document).ready(function(){
    $('#row1_col1_layout_type1, #row1_col1_layout_type2, #row1_col1_layout_type3').hide();
    $('#row1_col1_' + $('#row1_layout_options').val()).show();

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

这是fiddle

Answer 3

我建议为您加载的内容添加一个类，这将隐藏它们。

<强> 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="layouts">
    <div id="row1_col1_layout_type2">
        <input type="text" class="qa-form-tall-text" value="" name="q2am_fp_row1_col1_layout_type2">
    </div>
</div>

<强> JS

$('#row1_layout_options').change(function() {
   $('#layouts>div.selected').removeClass('selected');
   $('#row1_col1_' + $(this).val()).addClass('selected');
});

<强> CSS

#layouts>div{
    display:none;
}

#layouts>div.selected{
    display:block;
}

编辑：保存已选中

至于保存所选选项，您有这些非详尽的解决方案列表：

HTML5 localstorage ，您可以使用localStorage这是一个像Cookie一样刷新的javascript访问商店。我不建议我发现它非常不可靠。
服务器端持久性。基本上，当您将选项设置为selected时，您将向Web服务发送查询，该查询将在某处保存状态（数据库，对象实例等...）
网址修改。这不是真正的持久性解决方案，但它有时可以满足需求。您可以在URL参数部分中检索值http://localhost/mysite?selectedId=2。这样您就可以直接在链接中获取信息。更容易分享国家。

jQuery基于select选项保持show hide状态

3 个答案: