使用jquery下拉菜单刷新显示/隐藏div

在我的代码中，我使用jquery和下拉列表显示/打印div。这是可行的，但当刷新我的页面下拉列表时，不会重置并显示旧的选择。 e、 x jquery代码：

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

HTMl输出：

<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>

选择
分区1
分区2
分区3
分区1
分区2
分区3

在线演示：

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

打印问题的详细信息：

---

谢谢

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

见：

---

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

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

见：

---

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

您应该使用

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

---

请参见演示：

您应该使用

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

---

请参见演示：

无法在Chrome中复制。我也同意@Curt@MarcusEkwall是的，我现在也在IE工作。真的，这在FF中不起作用。我不理解这个问题，同意@Curt aswell@SaimonAvazian听起来像是缓存问题。这不应该发生。@MarcusEkwall:我添加了问题的打印屏幕。它可能被缓存。无法在Chrome中复制。我也同意@Curt@MarcusEkwall是的，我现在也在IE工作。真的，这在FF中不起作用。我不理解这个问题，同意@Curt aswell@SaimonAvazian听起来像是缓存问题。这不应该发生。@MarcusEkwall:我添加了问题的打印屏幕。它可能已被缓存。您的代码在没有保留选择的情况下工作您的代码在没有保留选择的情况下工作