選択メニューからそれぞれのオプションを選択すると、表示されるか非表示になる2つのスパンがあります。デフォルトでは、両方のスパンはCSSのdisplay: none
に設定されています。私は、ページがリロードされた後に現在表示されている範囲の可視性を維持したいと考えています(たとえば、検証エラーがあった場合など)。ページをリロードした後、選択メニューを切り替えるdivの状態をどのように維持しますか?
これはチェックボックスで行いましたが、簡単でしたが、選択メニューではわかりません。
// Toggles the div based on selected option
$(function() {
$('#maintenanceIntervalId').change(function() {
var value = $('#maintenanceIntervalId option:selected').val()
switch(value) {
case "2": {
$("#weekly-maintenance-on").show();
$("#monthly-maintenance-on").hide();
break;
}
case "3": {
$("#monthly-maintenance-on").show();
$("#weekly-maintenance-on").hide();
break;
}
case "1": {
$("#weekly-maintenance-on").hide();
$("#monthly-maintenance-on").hide();
break;
}
}
});
});
上記のとおりです。しかし、
toggleMaintenanceDiv($('#maintenanceIntervalId option:selected'))
これは動作しません。しかし、ページのリロード後に目に見える滞在する現在可視スパンを得るために、私は、独自の機能toggleMaintenanceDiv()
にswitch文を移動して、次の行を追加しました。
HTML:
<select id="maintenanceIntervalId">
<option value="1">Day</option>
<option value="2">Week</option>
<option value="3">Month</option>
</select>
<span id="weekly-maintenance-on">Stuff one</span>
<span id="monthly-maintenance-on">Stuff two</span>
この場合、Cookieが必要かどうかはわかりません。これを見てください:http://stackoverflow.com/questions/8406336/how-do-you-maintain-the-state-of-a-checkbox-toggled-div-after-page-reload – Mohamad