Why div not show/hide on select options in jQuery
Question
I need to hide a specific div when I select an option from select drop-down.
For example
When document load no div will show
When we select 1 option then OneLevel will show
When we select 2 option then TwoLevel will show
When we select 1 option then ThreeLevel will show
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#Level").hide();
function WorkflowLevel(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
$("#Level").hide();
switch (selected) {
case '0':
$("#Level").hide();
break;
case '1':
$("#Level").hide();
$("#Level#OneLevel").show();
break;
case '2':
$("#Level").hide();
$("#Level#TwoLevel").show();
break;
case '3':
$("#Level").hide();
$("#Level#ThreeLevel").show();
break;
}
}
</script>
</head>
<body>
<select id="WorkflowLevel" class="form-control" name="show_text_area" onchange="WorkflowLevel(this)">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="Level OneLevel">1</div>
<div id="Level TwoLevel">2</div>
<div id="Level ThreeLevel">3</div>
</body>
</html>
6 answers
solution1
2 2017-03-17 07:08:45
You do not need switch case. You can use index position and toggle visibility accordingly.
$(".Level").hide(); function WorkflowLevel(obj) { var selected = $("option:selected", obj).index(); $(".Level").hide(); selected && $(".Level:eq(" + (selected - 1) + ")").show(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="WorkflowLevel" class="form-control" name="show_text_area" onchange="WorkflowLevel(this)"> <option value="0">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="Level OneLevel">1</div> <div class="Level TwoLevel">2</div> <div class="Level ThreeLevel">3</div>
solution2
0 2017-03-17 07:04:48
I don't think multiple ID is possible for one element, you should use class="level" and id on number like id="OneLevel" or just id="One" and in your hide/show selector use something like $(".level#One").hide();
For more details on multiple id: Can an html element have multiple ids?
solution3
0 2017-03-17 07:05:41
There are few defects in both the html & js It is awkward when you write id as id="Level OneLevel" . id need to be unique.
Use Level as common class . Use this class to hide all the div #Level#TwoLevel & etc is wrong. There is no DOM element with id this
JS
$(".Level").hide();
function WorkflowLevel(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
$(".Level").hide();
switch (selected) {
case '0':
$(".Level").hide();
break;
case '1':
$(".Level").hide();
$("#OneLevel").show();
break;
case '2':
$(".Level").hide();
$("#TwoLevel").show();
break;
case '3':
$(".Level").hide();
$("#ThreeLevel").show();
break;
}
}
HTML
<div id="OneLevel" class="Level">1</div>
<div id="TwoLevel" class="Level">2</div>
<div id="ThreeLevel" class="Level">3</div>
solution4
0 2017-03-17 07:07:29
Here's an example of how to write it with significantly less painful rewriting. We use custom attribute called showId to show the proper box by matching it up with the .val() of our WorkFlowLevel selection. It will make it a lot easier to add more items.
$("#WorkflowLevel").change(function () { $(".Level").hide() $("[showId="+$(this).val()+"]").show(); }).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="WorkflowLevel" class="form-control" name="show_text_area"> <option value="0">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="Level" showId="1">1</div> <div class="Level" showId="2">2</div> <div class="Level" showId="3">3</div>
solution5
0 2017-03-17 07:08:04
You can't give same id to multiple divs, these should be unique. Use class instead, below is am example.
$(document).ready(function(){ $(".lvl").hide(); $("#WorkflowLevel").on('change', function(){ $(".lvl").hide(); $("#Level"+$(this).val()).show(); }) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <select id="WorkflowLevel" class="form-control" name="show_text_area" > <option value="0">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div id="Level1" class="lvl">1</div> <div id="Level2" class="lvl">2</div> <div id="Level3" class="lvl">3</div>solution6
0 2017-03-17 07:09:46
$(".Level").hide(); $("#WorkflowLevel").change(function() { $(".Level").hide(); var id = $("option:selected", this).val() $(".Level").filter(function() { return $(this).attr("data-id") == id; }).show() })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="WorkflowLevel" class="form-control" name="show_text_area"> <option value="0">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="Level OneLevel" data-id="1">1</div> <div class="Level TwoLevel" data-id="2">2</div> <div class="Level ThreeLevel" data-id="3">3</div>
- Add data-attribute that corresponds to the value of options
- Change
IDtoClassof divLevelID should be unique - Use filter to select the div that has data attribute equal to option selected value
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.