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

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

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

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

HTML

 Select Layout Type layout_type1 layout_type2 layout_type3 layout_type4 layout_type5 layout_type6 layout_type7 layout_type8  
   

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分配一个公共类

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

 
 ^ ----- This to target with a single selector 

CSS

 .content{ display :none; } 

并且在JS中只触发change事件，以便显示带有所选选项的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，本地存储或将其保存在服务器上并将其检索回来。 检查小提琴

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

这是小提琴

Answer 3

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

HTML

  Select Layout Type layout_type1 layout_type2 layout_type3 layout_type4 layout_type5 layout_type6 layout_type7 layout_type8  
 
  
  

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修改 。 这不是一个真正的持久性解决方案，但它有时可以满足需求。 您可以在URL参数部分中检索值，例如http://localhost/mysite?selectedId=2 。 这样您就可以直接在链接中获取信息。 更容易分享国家。