我试图根据从多选中选择的选项来显示或隐藏一系列输入。
如果选择了一个选项,我的解决方案就会起作用,但是一旦我选择了第二个选项,它就会显示出来,直到我取消我的第一个选择。
我的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/