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

在我的代码中，我使用jquery &下拉列表显示/打印div。这工作，但刷新我的网页下拉不重置并显示旧的选择。前jQuery代码：使用jquery下拉刷新显示/隐藏div

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

在线演示：HERE

问题：后单击并选择任何DIV这显示结果格但之后刷新不会重置下拉和隐藏div结果。为了更好地理解，选择下拉列表右键单击jsffiddle结果并刷新此框架（结果）U查看我的问题。问题

打印SCR：

enter image description here

感谢

来源

2012-03-30 Saimon Avazian

无法在Chrome中重现。我也赞同@Curt。 – mekwall 2012-03-30 09:37:59

@MarcusEkwall是的，我也检查了现在在IE工作。真的这不工作在FF。 – 2012-03-30 09:42:00

我不明白这个问题，同意@Curt – Th0rndike 2012-03-30 09:42:19

你应该使用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/

来源

2012-03-30 10:11:25 Jigs

您的代码在没有库存的情况下工作选择 – 2012-03-30 11:02:43

我已经在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/

它basicly承担负荷的 “选择” 值，并显示在div，如果不是默认:)

来源

2012-03-30 09:59:36

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

回答

相关问题