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

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!



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here