0
206
ViewsHow to show specific HTML elements based on user's selection in dropdown
I have an HTML page that consists of two bar graphs. How can I hide both of these graphs by default with the option 'select' only only show 1 element at a time based on user's selection in the dropdown menu?
HTML:
<input type="number" id="options" value="" style="display:none">
<select id="option">
<option>select</option>
<option id="option-salary"> Sort by Salary </option>
<option id="option-age"> Sort by Age </option>
</select>
</input>
<div id="bar-chart">
<div class="salary-chart chart-container ">
<div class="names" id="salary-names"></div>
<div class="chart" id="salary-chart"></div>
</div>
<div class="age-chart chart-container ">
<div class="names" id="age-names"></div>
<div class="chart" id="age-chart"></div>
</div>
</div>
CSS
.chart-container{
display: flex;
padding: 20px;
min-height: 100%;
}
.chart{
border: 1px black solid;
width: 500px;
}
.salary{
margin: 20px;
}
.age{
margin: 20px;
}
.name{
margin: 20px;
}
Thank you in advance!
2 answers
Answer question0
you can use JavaScript's by capturing element ID .
here is an example of doing it
function showDiv(divId, element)
{
document.getElementById(any id number).style.display = element.value
== 1 ?
'block' : 'none';
}
<select id="any id number" name="form_select"
onchange="showDiv('hidden_div', this)">
<option value="0">Select</option>
<option value="1">sort by salary</option>
</select>
<div id="hidden_div"> a hidden div element</div>
css:
#hidden_div {
display: none;
}
0
You will need to use Javascript for this purpose , But let us start with Your Html markUp : first - we have to remove the input tag from around the select element as it is not required . second - We will give each value a specific value ('age' for age option and salary for 'salary' option)
<select id="option">
<option>select</option>
<option id="option-salary" value="salary"> Sort by Salary </option>
<option id="option-age" value="age"> Sort by Age</option>
</select>one we have given the vaalues to option then we will set the display of the two charts to display : none is Css
.chart-container {
display: none;
}And now we will set the event onchange in javascript to truck any changes in options and then display one chart depending on the choice made
add this script to Your Javascript file
//get the Elements from the Html Document
let sortInput = document.getElementById('option'),
salaryCartr = document.querySelector('.salary-chart'),
ageCart = document.querySelector('.age-chart');
//When the sort input changes
sortInput.onchange = function() {
let inputValue = document.getElementById('option').value;
// check the value returned and make the desicion
switch (inputValue) {
case 'age':
salaryCartr.style.display = "none";
ageCart.style.display = "block";
break;
case 'salary':
ageCart.style.display = "none";
salaryCartr.style.display = "block";
break;
default:
ageCart.style.display = "none";
salaryCartr.style.display = "none";
break;
}
}