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

回答

相關問題