我试图根据从多选中选择的选项来显示或隐藏一系列输入。

如果选择了一个选项,我的解决方案就会起作用,但是一旦我选择了第二个选项,它就会显示出来,直到我取消我的第一个选择。

我的HTML:

<div class="form-group">
<label for="">Multi Select:</label>
<select name="" id="" multiple="" onchange="checkThis(this);">
    <option value="option1">fhfg</option>
    <option value="option2">fghgfhfh</option>
</select>
</div>

<div class="form-group" id="ifYesOption1" style="display: none;">
<label for="">Option 1:</label>
<select name="" id="" multiple="">
    <option value=""></option>
</select>
</div>

<div class="form-group" id="ifYesOption2" style="display: none;">
<label for="">Option 2:</label>
<select name="" id="" multiple="">
    <option value=""></option>
</select>
</div>


我的JS:

<script>
function checkThis(showThis) {
    if(showThis.value == "option1") {
        document.getElementById("ifYesOption1").style.display = "block";
    }else {
        document.getElementById("ifYesOption1").style.display = "none";
    }

    if (showThis.value == "option2") {
        document.getElementById("ifYesOption2").style.display = "block";
    }else {
        document.getElementById("ifYesOption2").style.display = "none";
    }
}
</script>

最佳答案

试试这个纯jquery解决方案:



$("#f").change(function(){
    if($(this).val()=="option1"){
      $("#ifYesOption1").toggle()
    }
    else $("#ifYesOption2").toggle()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="">Multi Select:</label>
<select name="" id="f" multiple="">
    <option value="option1">fhfg</option>
    <option value="option2">fghgfhfh</option>
</select>
</div>

<div class="form-group" id="ifYesOption1" style="display: none;">
<label for="">Option 1:</label>
<select name="" id="" multiple="">
    <option value=""></option>
</select>
</div>

<div class="form-group" id="ifYesOption2" style="display: none;">
<label for="">Option 2:</label>
<select name="" id="" multiple="">
    <option value=""></option>
</select>
</div>

关于javascript - 使用多重选择显示/隐藏多个Div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46468706/

10-12 12:58
查看更多