在页面加载时显示 DIV，而不仅仅是下拉列表的“更改”

Question

我目前有基于下拉列表选择显示的表单部分：

$('#Selection').on('change', function () {

if(this.value === "Section1"){
    $("#Section1").show();
} else {
    $("#Section1").hide();
}

  if(this.value === "Section2"){
    $("#Section2").show();
} else {
    $("#Section2").hide();
}

  if(this.value === "Section3"){
    $("#Section3").show();
} else {
    $("#Section3").hide();
}

  if(this.value === "Section4"){
    $("#Section4").show();
} else {
    $("#Section4").hide();
}

      if(this.value === "Section5"){
    $("#Section5").show();
} else {
    $("#Section5").hide();
}

});

这对我的“添加”功能很有效，因为默认的下拉列表选择是“请选择...”，这意味着有一个“更改”会触发我的功能。

对于我的“编辑”功能，已经进行了选择，并且不太可能对此选择进行更改。 我试图将 .on('change') 位更改为 .on('load') 但这似乎不起作用！

感觉我需要做一个简单的改变，但我对 javaScript 一窍不通！

谢谢。

Answer 1

试试这个：

$( document ).ready(function() {
    // Handler for .ready() called.
    $("#Section1").show();
});

Answer 2

尝试在文档就绪时手动触发您的代码，如下所示：

$(document).ready(function(){
     $("#Selection").trigger("change");
});

如果您对更改处理程序中的功能感到满意；

Answer 3

我认为Klikas解决方案是正确的：

$(document).ready(function(){
    if($('#Selection').value!=""){$('#Selection').trigger("change");}
});

你可以用这样的东西来简化你的长函数：

$('#Selection').on('change', function(){
    var p=["Section1", "Section2", "Section3", "Section4", "Section5"];
    for(var i=0; i<p.length; i++){var n=p[i]; var t=$("#"+n); if(t){this.value===n?t.show():t.hide();}}
});