Radio button adding values to dropdown list

Question

I am trying to populate a dropdown list with a value based on a radio button being selected. The radio buttons either add to the list or remove from the list based on which radio is selected.

I managed to write code for a text field and submit button, but I need to use radio buttons instead. Any help is really appreciated.

 const btnAdd = document.querySelector('#btnAdd'); const btnRemove = document.querySelector('#btnRemove'); const sb = document.querySelector('#list'); const name = document.querySelector('#name'); btnAdd.onclick = (e) => { e.preventDefault(); // validate the option if (name.value == '') { alert('Please enter the name.'); return; } // create a new option const option = new Option(name.value, name.value); // add it to the list sb.add(option, undefined); // reset the value of the input name.value = ''; name.focus(); };

 <div id="container"> <form> <input type="radio" id="studio1" aria-label="Studio 1" value="1" name="studio1">Studio 1 enable<br /> <input type="radio" id="studio1" aria-label="Studio 1" value="1" name="studio1">Studio 1 disable<br /> <input type="radio" id="studio2" aria-label="Studio 2" value="2" name="studio2">Studio 2 enable<br /> <input type="radio" id="studio2" aria-label="Studio 2" value="2" name="studio2">Studio 2 disable<br /> <input type="radio" id="studio3" aria-label="Studio 3" value="3" name="studio3">Studio 3 enable<br /> <input type="radio" id="studio3" aria-label="Studio 3" value="3" name="studio3">Studio 3 disable<br /> <input type="radio" id="studio4" aria-label="Studio 4" value="4" name="studio4">Studio 4 enable<br /> <input type="radio" id="studio4" aria-label="Studio 4" value="4" name="studio4">Studio 4 disable<br /> <label for="name">Studio:</label> <input type="text" id="name" placeholder="Studio Number" autocomplete="off"><br /> <button id="btnAdd">Add</button><br /> <label for="list">Studio List:</label> <select id="list" name="list" multiple></select> </form> </div>

Answer 1

Note that you use in your code ids twice which is not valid HTML - ids have to be unique. Either change them to classes or omit them as they might be not needed. You can do it like this:

 const btnAdd = document.querySelector('#btnAdd'); const btnRemove = document.querySelector('#btnRemove'); const sb = document.querySelector('#list'); const name = document.querySelector('#name'); btnAdd.onclick = (e) => { e.preventDefault(); // validate the option if (name.value == '') { alert('Please enter the name.'); return; } // create a new option const option = new Option(name.value, name.value); // add it to the list sb.add(option, undefined); // reset the value of the input name.value = ''; name.focus(); }; $("input[name^='studio']").on("click", function(e) { let studio = $(this).attr("name"); let studioName = $(this).attr("aria-label"); let studioText = e.currentTarget.nextSibling.data; if (studioText.includes("enable")) { let newoption = $("<option value='" + studio + "'>" + studioName + "</option>"); $("#list").append(newoption); } else { $("#list option[value='" + studio + "']").remove(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <form> <input type="radio" class="studio1" aria-label="Studio 1" value="1" name="studio1">Studio 1 enable<br /> <input type="radio" class="studio1" aria-label="Studio 1" value="1" name="studio1">Studio 1 disable<br /> <input type="radio" class="studio2" aria-label="Studio 2" value="2" name="studio2">Studio 2 enable<br /> <input type="radio" class="studio2" aria-label="Studio 2" value="2" name="studio2">Studio 2 disable<br /> <input type="radio" class="studio3" aria-label="Studio 3" value="3" name="studio3">Studio 3 enable<br /> <input type="radio" class="studio3" aria-label="Studio 3" value="3" name="studio3">Studio 3 disable<br /> <input type="radio" class="studio4" aria-label="Studio 4" value="4" name="studio4">Studio 4 enable<br /> <input type="radio" class="studio4" aria-label="Studio 4" value="4" name="studio4">Studio 4 disable<br /> <label for="name">Studio:</label> <input type="text" id="name" placeholder="Studio Number" autocomplete="off"><br /> <button id="btnAdd">Add</button><br /> <label for="list">Studio List:</label> <select id="list" name="list" multiple></select> </form> </div>

Answer 2

Note that you have to change the id s of the radio buttons. Otherwise one cannot use the ids. Ids have to be unique.

 const btnAdd = document.querySelector('#btnAdd'); const btnRemove = document.querySelector('#btnRemove'); const sb = document.querySelector('#list'); const name = document.querySelector('#name'); const radios = document.querySelectorAll("#container input[type='radio']"); for(let i = 0; i < radios.length; i++){ radios.item(i).addEventListener("change", function(e){ const studio_num = this.value; const studio_text = "Studio " + studio_num; if(this.getAttribute("id").indexOf("enable") >= 0){ // enable button is clicked // create a new option const option = new Option(studio_text, studio_num); // add it to the list sb.add(option, undefined); } else{ for(let j = 0; j < sb.children.length; j++){ if(sb.children.item(j).value == studio_num){ sb.children.item(j).parentElement.removeChild(sb.children.item(j)); return; } } } }); } btnAdd.onclick = (e) => { e.preventDefault(); // validate the option if (name.value == '') { alert('Please enter the name.'); return; } // create a new option const option = new Option(name.value, name.value); // add it to the list sb.add(option, undefined); // reset the value of the input name.value = ''; name.focus(); };

 <div id="container"> <form> <input type="radio" id="studio1-enable" aria-label="Studio 1" value="1" name="studio1">Studio 1 enable<br /> <input type="radio" id="studio1-disable" aria-label="Studio 1" value="1" name="studio1">Studio 1 disable<br /> <input type="radio" id="studio2-enable" aria-label="Studio 2" value="2" name="studio2">Studio 2 enable<br /> <input type="radio" id="studio2-disable" aria-label="Studio 2" value="2" name="studio2">Studio 2 disable<br /> <input type="radio" id="studio3-enable" aria-label="Studio 3" value="3" name="studio3">Studio 3 enable<br /> <input type="radio" id="studio3-disable" aria-label="Studio 3" value="3" name="studio3">Studio 3 disable<br /> <input type="radio" id="studio4-enable" aria-label="Studio 4" value="4" name="studio4">Studio 4 enable<br /> <input type="radio" id="studio4-disable" aria-label="Studio 4" value="4" name="studio4">Studio 4 disable<br /> <label for="name">Studio:</label> <input type="text" id="name" placeholder="Studio Number" autocomplete="off"><br /> <button id="btnAdd">Add</button><br /> <label for="list">Studio List:</label> <select id="list" name="list" multiple></select> </form> </div>