Cuando hago clic en otro, el anterior no debería estar visible.
Quiero que si selecciono A, y luego B, y luego C, el HTML interno debería mostrar solo contenido C. ¿Puede alguien ayudarme con cómo hacer esto?
De hecho, lo necesito para un formulario jsp donde puedo alternar entre las opciones y luego obtener el parámetro. Estoy atascado en esto.
function myFunction() { if (document.getElementById("abcid").selectedIndex == "1") { document.getElementById("aid").innerHTML = "A:<select>" + "<option>Select-</option>" + "<option>Alex</option>" + "<option>Jack</option>" + "</select>"; } else if (document.getElementById("abcid").selectedIndex == "2") { document.getElementById("bid").innerHTML = "B:<select>" + "<option>Select-</option>" + "<option>US</option>" + "<option>Australia</option>" + "<option>India</option>" + "</select>"; } else if (document.getElementById("abcid").selectedIndex == "3") { document.getElementById("cid").innerHTML = "C:<select>" + "<option>Select-</option>" + "<option>Blue</option>" + "<option>Green</option>" + "<option>Red</option>" + "</select>"; } } <table> <tr> <td>ABC: <select id="abcid" onchange="myFunction()"> <option>Select-</option> <option>A</option> <option>B</option> <option>C</option> </select> </td> </tr> <tr> <td id="aid"></td> </tr> <tr> <td id="bid"></td> </tr> <tr> <td id="cid"></td> </tr> </table>una manera más fácil de hacer esto...
const selectABC = document.querySelector('#abcid') , trSelect2 = document.querySelector('tr.noDisplay') , label_2 = trSelect2.querySelector('label') , select_2 = trSelect2.querySelector('select') , selCases = { A: { label: 'Aaa', sels:[ {k: '1', v:'Alex' }, {k: '2', v:'Jack' } ] } , B: { label: 'Bbb', sels:[ {k: 'w', v:'US' }, {k: 'x', v:'Australia' }, {k: 'y', v:'India' } ] } , C: { label: 'Ccc', sels:[ {k: '$', v:'Blue' }, {k: '£', v:'Green' }, {k: '§', v:'Red' } ] } }; selectABC.onchange = e => { select_2.length = 1 select_2.selectedIndex = 0 label_2.textContent = selCases[selectABC.value].label selCases[selectABC.value].sels.forEach(({k,v}) => select_2.add( new Option(v,k)) ) trSelect2.classList.remove('noDisplay') } .noDisplay { display: none; } <table> <tr> <td> <label>ABC:</label> <select id="abcid"> <option value="" selected disabled>Select-</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </td> </tr> <tr class="noDisplay"> <td> <label></label> <select> <option value="" selected disabled>Select-</option> </select> </td> </tr> </table>Aquí puedes encontrar una solución:
var select = document.querySelector("#abcid"); select.addEventListener('input', function (event) { var conditionals = document.querySelectorAll('.conditional'); var selectedValue = select.value; var selectedSub = document.querySelector("#abcid-"+select.value); for(var i=0; i<conditionals.length; i++){ if(selectedSub.id === conditionals[i].id){ conditionals[i].classList.remove('hide'); conditionals[i].classList.add('show'); }else{ conditionals[i].classList.add('hide'); conditionals[i].classList.remove('show'); } } }); .hide{ display:none; } .show{ display:block; } ABC: <select id="abcid"> <option>Select-</option> <option>A</option> <option>B</option> <option>C</option> </select> <select id="abcid-A" class="conditional hide"> <option>Select-A</option> <option>AA</option> <option>AB</option> <option>AC</option> </select> <select id="abcid-B" class="conditional hide"> <option>Select-B</option> <option>BA</option> <option>BB</option> <option>BC</option> </select> <select id="abcid-C" class="conditional hide"> <option>Select-C</option> <option>CA</option> <option>CB</option> <option>CC</option> </select>