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!

CodePudding user response：

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;
  }

CodePudding user response：

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;
            }
        }