使用jquery下拉列表刷新显示/隐藏div

Question

在我的代码中我使用jquery＆amp;显示/打印div落下 。这工作但但刷新我的页面下拉列表时没有重置并显示旧选择。 e.x jquery代码：

$(document).ready(function(){
 $('.box').hide();
  $('#dropdown').change(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
 });
});

HTMl OUTPUT：

<form>
 <select id="dropdown" name="dropdown">
  <option value="0">Choose</option>
  <option value="area1">DIV Area 1</option>
  <option value="area2">DIV Area 2</option>
  <option value="area3">DIV Area 3</option>
 </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

在线演示：HERE

问题：单击并选择任何div后显示结果div但刷新后不重置下拉列表并隐藏div结果。为了更好地理解选择下拉后右键单击jsffiddle结果并刷新此帧（结果）你看到我的问题。

打印问题的SCR：

由于

Answer 1

你应该使用包含所选下拉值的Htmlhiddeninput而不是渲染div

  $(document).ready(function(){

   $('.box').hide();
  // First Way :

   $('#HiddenInput').empty();
   $('#HiddenInput').val($('#dropdown').val());
   var value =  $('#HiddenInput').val();
   $('#dropdown').val(value);
   $('#div' + value).show();


   $('#dropdown').change(function() {
      $('.box').hide();
      $('#HiddenInput').val($(this).val());
      $('#div' + $(this).val()).show();
  }); 
});

此处参见DEMO ：http://jsfiddle.net/pXdS6/16/

Answer 2

我在Firefox中遇到同样的问题。

这看似合理。如果您重新加载页面并打开“保存表单数据” - 它会自动为您重新填充表单。 由于您只在“更改”时显示所选的div，因此它可能已经从默认值更改。

然后您可以添加此

$(document).ready(function(){
 $('.box').hide();

  var selected = $('#dropdown').val();
    if(selected != 0) {
      $('.box').hide();
      $('#div' + selected).show();
    }

  $('#dropdown').change(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
 });
});

请参阅：http://jsfiddle.net/pXdS6/

它基本上在加载时选择“select”值，并显示div，如果不是默认值：）