jQuery根据选择选项保持显示隐藏状态 [英] jQuery keep show hide state based on select option

问题描述

我已经下拉选择，并根据下拉列表中选择的选项显示隐藏其他字段(在divs内).

I have drop down select and show hide other fields (within divs) based on option selected in the dropdown list.

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

This code works fine and show hide based on selection but when I load the page all fields are visible.

例如，如果我想显示字段(如果选择了选项2并将该选项保存到数据库中)，并且在重新加载页面时，它并没有保存基于所选选项的显示隐藏状态.

Other thing is for instance if I want to show fields if option 2 selected and save the option to the database and when reload the page it is not saving the show hide state based on the option selected.

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();
});

所以我该如何编写脚本，其中所有字段在页面加载时都被隐藏，但是它将根据所选选项保持显示隐藏状态.

So how can I write script where all fields are hidden on page load but it will keep show hide state based on selected option.

推荐答案

为包含内容的所有div分配一个通用类

Assign an common class to all the div's that holds the content

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

show hide based on selection but when I load the page all fields are visible

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

CSS

.content{
   display :none;
}

然后在 JS 中触发更改事件，以显示带有选定选项的div

And in the JS just trigger the change event so as to show the div with option that is selected

$('#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

接下来是页面重新加载. Web是stateless.因此它不会记住以前的状态.您唯一可以做的就是在页面刷新后保留该值.可能以cookie的形式存储在本地存储中，或者将其保存在服务器上并取回. 检查小提琴

Next is the Page Reload. Web is stateless . So it will not remember the previous state. The only thing you can do is persist the value after page refresh. Maybe in as a cookie, Local Storage or saving it on server and retrieving it back.. Check Fiddle

这篇关于jQuery根据选择选项保持显示隐藏状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！