puede usar JavaScript capturando el ID del elemento.

aquí hay un ejemplo de hacerlo

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

Necesitará usar Javascript para este propósito, pero comencemos con su marcado Html: primero , tenemos que eliminar la etiqueta de entrada alrededor del elemento seleccionado, ya que no es necesario. segundo : le daremos a cada valor un valor específico ('edad' para la opción de edad y salario para la opción de 'salario')

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

uno le hemos dado los valores a la opción, luego configuraremos la visualización de los dos gráficos para display : none es Css

 .chart-container { display: none; }

Y ahora configuraremos el evento onchange en javascript para realizar cualquier cambio en las opciones y luego mostrar un gráfico dependiendo de la elección realizada

agregue este script a su archivo Javascript

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