使用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:
感谢
答
你应该使用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/
+0
您的代码在没有库存的情况下工作选择 – 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();
});
});
它basicly承担负荷的 “选择” 值,并显示在div,如果不是默认:)
无法在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