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应该可见。

我已经尝试了很多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() } });

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.

Answer 2

下面的示例可根据需要工作。它将单击事件添加到选择中的选项，然后循环浏览每个选项，以检查是否已选择它。然后，使用索引我们可以显示或隐藏关联的div。

我添加了一个非常讨厌的CSS，以隐藏所有的形式启动所有关联的div-请勿这样做！向该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>

如何基于具有多个选择的下拉菜单切换输入字段

2 个答案: