Issue
I have one SelectBox, it can have values as 1,2,3.
Lets say This selectbox's name is : selectbox1.
There are 3 rows.
1.row => There is selectBox named selectbox2, and textbox named textbox1
2.row => There is selectBox named selectbox3, and textbox named textbox2
3.row => There is selectBox named selectbox4, and textbox named textbox3
If the value in selextBox1 equal to 1, only 1.row will be shown which are selextbox2, and textbox1
I can get the value in selectbox1 by this code,
var source = document.getElementsByName("selectbox1")[0].value;
But i couldnt make the rows show and hide based on the output of selextbox1
What function to write to solve this?
Solution
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<label for="vals">Choose</label>
<select name="vals" id="vals" onchange="updateDisplay(this.value)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id='row1'>
<p>this is row 1</p>
</div>
<div id='row2' style="display:none;">
<p>this is row 2</p>
</div>
<div id='row3' style="display:none;">
<p>this is row 3</p>
</div>
<script>
const updateDisplay = (rowNumber) => {
for(let i=1;i<4;i++) $(`#row${i}`).hide(); // hide all rows
$(`#row${rowNumber}`).show();// show the required row
}
</script>
</body>
</html>I have used jQuery's hide and show function to make the code look simpler. The same can be implemented using vanilla JavaScript as well like:
HIDE -> document.getElementById("row2").style.display = 'none';
SHOW -> document.getElementById("row2").style.display = 'block';
Answered By - Kaushik Jegannathan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.