Tengo un selector #selector con una enorme cantidad de opciones. En diferentes momentos, la cantidad de opciones puede llegar a varias docenas.
Cuando se carga la página, muestro el div #a junto al selector.
Necesito hacer que cuando se seleccionen otras opciones, el resto de los divs estén ocultos y solo se muestre el específico.
Por ejemplo, cuando el usuario selecciona la opción "C" , se debe mostrar un div con el ID #c . Etc.
Utilicé el siguiente script, pero no entiendo por qué no funciona.
Agradecería valiosos consejos.
function valueNew(ele) { var div = document.getElementsByClassName('block'); // iterating over them and hidding all for( var i=0;i<div.length;i++) { div[i].style.display = 'none' } div[ele.value].style.display = 'block'; } // trigger change event to show default div document.getElementById('selector').onchange(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="selector"> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> <option value="5">E</option> <option value="6">F</option> <option value="7">G</option> </select> <!-- This div is displayed by default on page load. --> <div id="#a" class="block" style="display: none;">Content for the A option</div> <div id="#b" class="block" style="display: none;">Content for the B option</div> <div id="#c" class="block" style="display: none;">Content for the C option</div> <div id="#d" class="block" style="display: none;">Content for the D option</div> <div id="#e" class="block" style="display: none;">Content for the E option</div> <div id="#f" class="block" style="display: none;">Content for the F option</div> <div id="#g" class="block" style="display: none;">Content for the G option</div>Es debido al () que colocó después de .onchange , quítelos y, en su lugar, dígale al programa qué función desea llamar colocándolo allí sin llamarlo.
document.getElementById("selector").onchange = valueNew;