Tengo una function Javascript que cambia las opciones de un menú desplegable en función de algunos radio de opción que se han seleccionado. Originalmente, tenía los botones de radio configurados en onclick para ejecutar la function , pero como se basa en 2 conjuntos diferentes de botones de radio , esto no funciona. Cambié el onclick para que suceda cuando el usuario selecciona el menú desplegable; sin embargo, ahora no puede select una option real, ya que solo restablece el menú desplegable cuando se realiza una selección. ¿Hay alguna alternativa que pueda usar?
Genotype <select name="dropdown" id="dropdown" onclick = "DROPDOWN(father);"></select>En lugar de onclick , necesitará realizar un seguimiento de onchange , por lo que incluso si hay algunos elementos de label a su alrededor, cambiándolos, tendrá su código funcionando. En cuanto a la solución, deberá implementar una lógica que determine las opciones que se generarán en cualquier combinación posible de sus radio de opción. El siguiente código es una prueba de concepto.
function refreshOptions() { let innerHTML = "<option>Please select</option>"; for (let item of document.querySelectorAll("input[type=radio]")) { if (item.checked) innerHTML += `<option value="${item.value}">${item.value}</option>` } document.getElementById("myselect").innerHTML = innerHTML; } <select id="myselect"> <option>Please select</option> <option value="foo1">foo1</option> <option value="bar1">bar1</option> </select> <label>foo1 <input onchange="refreshOptions()" type="radio" name="foo" value="foo1" checked></label> <label>foo2 <input onchange="refreshOptions()" type="radio" name="foo" value="foo2"></label> <label>bar1 <input onchange="refreshOptions()" type="radio" name="bar" value="bar1" checked></label> <label>bar2 <input onchange="refreshOptions()" type="radio" name="bar" value="bar2"></label>