刷新輸入的值（CSS）的頁面後消失

Question

我有一個選擇框，就像這樣：

<select id="fatherhoodDocument" name="fatherhoodDocument" style="width:250px;" data-bvalidator="myCyrillicDigitsAndSpaceValidator,required" data-bvalidator-modifier="myCapsModifier"> 
       <option value="[$i18n.getString("select")]">[$i18n.getString("select")]</option> 
       <option value="test1">test1</option> 
       <option value="test2">test</option> 
       <option value="test3">test3</option> 
</select> 

而且我有2倍隱藏的投入，這應該被激活，如果其中的一個選項所示上面已經選擇：

<input type="text" id="marriageregdate" name="marriageregdate" value="" style="width:80px; display:none;" data-bvalidator="required" data-fordraft="required"/> 
<input type="text" id="filliationregdate" name="filliationregdate" value="" style="width:80px; display:none;" data-bvalidator="required" data-fordraft="required"/> 

這是JavaScript碼確實改變了性能，如果一些選項已被點擊：

$('#fatherhoodDocument').on('change',function(){ 
        var selection = $(this).val(); 
        switch(selection){ 
        case "test1": 
         $("#marriageregdate").show(); 
         $("#marriageregdate").prop("disabled", false); 
         $("#filliationregdate").hide(); 
         $("#filliationregdate").prop("disabled", true); 
        break; 
        case "test2": 
         $("#filliationregdate").show(); 
         $("#filliationregdate").prop("disabled", false); 
         $("#marriageregdate").hide(); 
         $("#marriageregdate").prop("disabled", true); 
        break; 

        default: 
        $("#marriageregdate").hide(); 
        $("#filliationregdate").hide(); 

        } 
       }); 

它工作得很好，直到頁面沒有被刷新。一旦頁面被刷新（點擊f5或瀏覽器圖標），輸入就會回到原來的狀態，即隱藏。但select box的價值仍然與之前選擇的相同。 那麼，我的問題是如何保存code的更改，頁面被刷新後呢？

Answer 1

我不是你的SELECT在頁面刷新時保持不變的原因。但是，如果您想在頁面刷新後保留第一個選項，只需添加「selected」屬性即可。請檢查this。

<select id="fatherhoodDocument" name="fatherhoodDocument" style="width:250px;" data-bvalidator="myCyrillicDigitsAndSpaceValidator,required" data-bvalidator-modifier="myCapsModifier"> 
 
       <option value="[$i18n.getString("select")]" selected>[$i18n.getString("select")]</option> 
 
       <option value="test1">test1</option> 
 
       <option value="test2">test</option> 
 
       <option value="test3">test3</option> 
 
</select>

Answer 2

好了，在頁面加載/刷新，$('#fatherhoodDocument')尚未改變，從而改變處理程序不會被調用。你可以做的是將變更處理程序分配給一個變量，並在文檔準備和上調用$('#fatherhoodDocument')更改。

$(function() { 
    var ddFatherhoodDocument = $('#fatherhoodDocument'); 
    var toggleTextboxes = function() { 
    var selection = ddFatherhoodDocument.val(); 
    switch(selection) { 
     case "test1": 
     $("#marriageregdate").show(); 
     $("#marriageregdate").prop("disabled", false); 
     $("#filliationregdate").hide(); 
     $("#filliationregdate").prop("disabled", true); 
     break; 
     case "test2": 
     $("#filliationregdate").show(); 
     $("#filliationregdate").prop("disabled", false); 
     $("#marriageregdate").hide(); 
     $("#marriageregdate").prop("disabled", true); 
     break; 
     default: 
     $("#marriageregdate").hide(); 
     $("#filliationregdate").hide(); 
    } 
    } 

    ddFatherhoodDocument.on('change', toggleTextboxes); 
    toggleTextboxes(); 
}); 

Answer 3

你可以做這樣的事情，如下圖所示，你可以在不同的函數名定義函數並調用它準備的文件，以及在下拉的變化，在上準備功能changeData功能將不會被調用，除非下拉已經有東西在裏面選擇比默認的選擇

$('#fatherhoodDocument').on('change',changeData); 
 
$(document).ready(function() { 
 
console.log($("#fatherhoodDocument")[0].selectedIndex); 
 
    
 
if($('#fatherhoodDocument')[0].selectedIndex!=0){ 
 
     changeData(); 
 
    } 
 
}); 
 
function changeData(){ 
 
var selection = $('#fatherhoodDocument').val(); 
 
switch(selection){ 
 
case "test1":      $("#marriageregdate").show(); 
 
$("#marriageregdate").prop("disabled", false);      $("#filliationregdate").hide(); 
 
$("#filliationregdate").prop("disabled", true); 
 
break; 
 
case "test2":      $("#filliationregdate").show(); 
 
$("#filliationregdate").prop("disabled", false);     $("#marriageregdate").hide(); 
 
$("#marriageregdate").prop("disabled", true); 
 
break; 
 
default:     $("#marriageregdate").hide();    $("#filliationregdate").hide(); 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="fatherhoodDocument" name="fatherhoodDocument" style="width:250px;" data-bvalidator="myCyrillicDigitsAndSpaceValidator,required" data-bvalidator-modifier="myCapsModifier"> 
 
       <option value="[$i18n.getString("select")]">[$i18n.getString("select")]</option> 
 
       <option value="test1">test1</option> 
 
       <option value="test2">test</option> 
 
       <option value="test3">test3</option> 
 
</select> 
 

 
<input type="text" id="marriageregdate" name="marriageregdate" value="" style="width:80px; display:none;" data-bvalidator="required" data-fordraft="required"/> 
 
<input type="text" id="filliationregdate" name="filliationregdate" value="" style="width:80px; display:none;" data-bvalidator="required" data-fordraft="required"/>