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

好吧，在页面加载/刷新时，$('#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 2

您可以执行如下所示的操作，您可以在不同的函数名称下定义函数并在文档准备就绪时调用它以及更改下拉列表，在on ready函数中，changeData函数将不会除非下拉列表中选择了某些内容而不是默认选择

，否则调用

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我不是为什么你的SELECT在页面刷新时保持不变。但是，如果要在页面刷新后选择保留第一个选项，请尝试添加“已选择”属性。检查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>

页面刷新后，输入的值（css）消失

3 个答案: