javascript – How 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?

enter image description here


<input type="number" id="options" value="" style="display:none">
        <select id="option">
            <option id="option-salary"> Sort by Salary </option>
            <option id="option-age"> Sort by Age </option>

    <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 class="age-chart chart-container ">
            <div class="names" id="age-names"></div>
            <div class="chart" id="age-chart"></div> 


    display: flex;
    padding: 20px;
    min-height: 100%;

    border: 1px black solid;
    width: 500px;

    margin: 20px;

    margin: 20px;

    margin: 20px;

Thank you in advance!

Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here