我有一个由多项选择功能制成的下拉菜单。
我也有一些表单输入字段，其中包含一些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应该可见。
我已经尝试了很多if else和else if语句，它们带有jQuery的hide（）和show（）函数。每种方法都适用于“单选”，但不适用于多项选择。这个问题让我感到非常沮丧。
然后我尝试了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() } });
最佳答案
下面的示例按您的意愿工作。它将单击事件添加到选择中的选项，然后循环浏览每个选项，以检查是否已选择它。然后，使用索引我们可以显示或隐藏关联的div。
我添加了一个非常讨厌的CSS来将所有关联的divs隐藏起来-不要这样！将类添加到div中，因为此CSS规则不够具体，无法在演示外部使用。
有更优雅的方法，理想情况下，为每个选项使用属性，为关联的div提供名称。例如，您可以将option value用作关联的div的id。这将使编码更简单。
让我知道这是否不是您想要的。
演示版
// Add click event to options
$("select option").click( function() {
// Create index value
i = 1;
// Cycle through each of the options
$(this).closest("select").children("option").each( function() {
// Check if option is selected
if ( $(this).is(':selected') ) {
// If it is, show associated div
$("#id" + i).show();
} else {
// If it is not selected, hide associated div
$("#id" + i).hide();
}
// Increase index
i = i + 1;
});
});[id^='id'] {
display: none;
}
#idproof {
display: inherit;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<div id="id1">Aadhar Card #id1</div>
<div id="id2">Indian Passport #id2</div>
<div id="id3">Voter ID Card #id3</div>
<div id="id4">PAN Card #id4</div>
<div id="id5">Driving License #id5</div>
<div id="id6">Ration Card #id6</div>
<div id="id7">Birth Certificate #id7</div>
<div id="id8">Backward classes Certificate #id8</div>
<div id="id9">Unique Disability ID #id9</div>
<div id="id10">Army License #id10</div>
<div id="id11">Others #id11</div>