javascript - 如何根据具有多项选择的下拉菜单切换输入字段

Question

我有一个带有多选功能的下拉菜单。我还有一些表单输入字段，其中包含一些 div、标签和输入标签。我想在选择菜单中选择特定项目时显示特定的表单字段。

比方说，我有

    <div class="col-md-6 col-12">
    <div class="form-group">
        <label>Identity Proofs</label>
        <select class="form-control select2" multiple="multiple" data-placeholder="Select at least one valid Identity Proof"
                            style="width: 100%;" id="idproof">
            <option value="aadhar">Aadhar Card</option>    
            <option value="passport">Indian Passport</option>    
            <option value="voter-ID">Voter ID Card</option>    
            <option value="pan">PAN Card</option>    
            <option value="dl">Driving License</option>    
            <option value="ration">Ration Card</option>    
            <option value="birth">Birth Certificate</option>    
            <option value="scst">Backward classes Certificate</option>    
            <option value="udid">Unique Disability ID (UDID) Card</option>    
            <option value="army">Army License</option>
            <option value="others">Others</option>
        </select>
    </div>
</div>

我可以从上面的菜单中选择多个值。

然后我有 11 个或我想要切换可见性的字段。

当我选择“aadhar”时，id="id1"的 div 应该是可见的。相似地，当我选择“护照”时，id="id2"的 div 应该是可见的。相似地，当我同时选择“voter-ID”和“pan”时，id="id3"和 id="id4"的 div 应该是可见的。

我已经用 jQuery 的 hide() 和 show() 函数尝试了很多 if else 和 else if 语句。每种方法都适用于单选，但不适用于多选。我对这个问题感到非常沮丧。

然后我尝试了 FOR 循环(我不太了解 js 或 jQuery)。但它仍然没有帮助。下面是代码

$("#idproof").on('change',function(){
    var arrayid = ["id1","id2","id3","id4","id5","id6","id7","id8","id9","id10","id11"];
    var arrayname = ["aadhar","passport","voter-ID","pan","dl","ration","birth","scst","udid","army","others"];
    var i,j;
    for (j = 0; j <= 10; j++) {
if($("#idproof").val()=="arrayname[i]"){
    $("#arrayid[i]").hide();
}
    }
    for (i = 0; i <= 10; i++) {
if($("#idproof").val()=="arrayname[i]"){
    $("#arrayid[i]").show();
}
    }

});

我什至调整了语法(认为它是错误的)但它没有帮助。我什至尝试在 div 中使用“display:none”，然后通过 jQuery 对其进行更改，但仍然没有希望。

我最后一次尝试是:

$("#idproof").on('change',function(){
    $("#id1","#id2","#id3","#id4","#id5","#id6","#id7","#id8","#id9","#id10","#id11").hide()
    if( !($("#idproof").val()=="aadhar")){
    $("#id1").hide()
    }
    else{
            $("#id1").show()
        }
    if( !($("#idproof").val()=="passport")){
    $("#id2").hide()
    }
     else{
            $("#id2").show()
        }
    if( !($("#idproof").val()=="voter-ID")){
    $("#id3").hide()
    }
     else{
            $("#id3").show()
        }
    if( !($("#idproof").val()=="pan")){
    $("#id4").hide()
    }
     else{
            $("#id4").show()
        }
    if( !($("#idproof").val()=="dl")){
    $("#id5").hide()
    }
     else{
            $("#id5").show()
        }
    if( !($("#idproof").val()=="ration")){
    $("#id6").hide()
    }
     else{
            $("#id6").show()
        }
    if( !($("#idproof").val()=="birth")){
    $("#id7").hide()
    }
     else{
            $("#id7").show()
        }
    if( !($("#idproof").val()=="scst")){
    $("#id8").hide()
    }
     else{
            $("#id8").show()
        }
    if( !($("#idproof").val()=="udid")){
    $("#id9").hide()
    }
     else{
            $("#id9").show()
        }
    if( !($("#idproof").val()=="army")){
    $("#id10").hide()
    }
     else{
            $("#id10").show()
        }
    if( !($("#idproof").val()=="others")){
    $("#id11").hide()
    }
     else{
            $("#id11").show()
        }
});

下面的代码适用于单选(但仍然有问题)

$("#idproof").on('change',function(){ $("#id1","#id2","#id3","#id4","#id5","#id6","#id7","#id8","#id9","#id10","#id11").hide() if( !($("#idproof").val()=="aadhar")){ $("#id1").hide() } else{ $("#id1").show() } if( !($("#idproof").val()=="passport")){ $("#id2").hide() } else{ $("#id2").show() } if( !($("#idproof").val()=="voter-ID")){ $("#id3").hide() } else{ $("#id3").show() } if( !($("#idproof").val()=="pan")){ $("#id4").hide() } else{ $("#id4").show() } if( !($("#idproof").val()=="dl")){ $("#id5").hide() } else{ $("#id5").show() } if( !($("#idproof").val()=="ration")){ $("#id6").hide() } else{ $("#id6").show() } if( !($("#idproof").val()=="birth")){ $("#id7").hide() } else{ $("#id7").show() } if( !($("#idproof").val()=="scst")){ $("#id8").hide() } else{ $("#id8").show() } if( !($("#idproof").val()=="udid")){ $("#id9").hide() } else{ $("#id9").show() } if( !($("#idproof").val()=="army")){ $("#id10").hide() } else{ $("#id10").show() } if( !($("#idproof").val()=="others")){ $("#id11").hide() } else{ $("#id11").show() } });

Answer 1

如果您的 <select>是多选然后这返回一个数组:

$("#idproof").val()

所以这永远不会是真的:

$("#idproof").val() == "aadhar"

相反，只需获取您的数组并检查该数组是否包含该值。像这样的东西:

let selectedValues = $("#idproof").val();
if (selectedValues.indexOf('aadhar') > -1) {
    // show your elements
}
if (selectedValues.indexOf('passport') > -1) {
    // show your other elements
}
// etc.