Refresh show/hide div mit jquery dropdown

Question

In meinem Code zeige/div mit jquery & dropdown. das funktionierte aber beim auffrischen meiner seite dropdown nicht zurückgesetzt und zeige alt auswählen. ex jquery Code:

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

HTML-Ausgabe:

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

Online Demo: HERE

Problem: Nach dem Klick und wählen Sie jede mögliche div Show Ergebnis div Aber nach Refresh nicht Drop-Down-Reset und verstecken div Ergebnis. Zum besseren Verständnis nach dem Dropdown-Menü rechtsklicken Sie auf jsffiddle result und aktualisieren Sie diesen Rahmen (Ergebnis) U meine Probleme sehen.

drucken SCR von Problem:

Dank

Answer 1

sollten Sie Verwenden Sie Htmlhiddeninput, die Ihren ausgewählten Wert des Dropdown enthalten, als das 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(); 
    }); 
}); 

Hier sehen Sie DEMO: http://jsfiddle.net/pXdS6/16/

Answer 2

Ich habe das gleiche Problem in Firefox.

Und es scheint vernünftig. Wenn Sie die Seite neu laden und "Formulardaten speichern" aktiviert haben, wird das Formular automatisch für Sie neu ausgefüllt. Und da Sie nur das ausgewählte div auf "ändern" zeigen, berücksichtigt es dosent möglicherweise bereits vom Standardwert.

Sie können diese

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

See dann hinzufügen: http://jsfiddle.net/pXdS6/

es die "wählen Sie" Wert auf Last basicly nimmt, und die div zeigen, wenn nicht standardmäßig :)