I have a Javascript function that changes a dropdown menu's options based on some radio buttons that have been selected. I originally had the radio buttons set to onclick to run the function but as it is based on 2 different sets of radio buttons this does not work. I changed the onclick to happen when the user selects the drop down however now you cannot select an actual option as it just resets the dropdown when a selection is made. Is there and alternative I can use?
Genotype <select name="dropdown" id="dropdown" onclick = "DROPDOWN(father);"></select>
Instead of onclick you will need to track onchange, so even if there are some label elements around them, changing them, you will have your code working. As about the solution, you will need to implement a logic that determines the options to be generated upon any possible combination of your radio buttons. The code below is a proof-of-concept.
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>