单选按钮将值添加到下拉列表

Question

我正在尝试使用基于选中单选按钮的值填充下拉列表。 单选按钮可以添加到列表中，也可以根据选择的单选从列表中删除。

我设法为文本字段和提交按钮编写代码，但我需要使用单选按钮。 非常感谢任何帮助。

 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

请注意，您在代码中使用了两次无效的 HTML - id 必须是唯一的。 将它们更改为类或省略它们，因为它们可能不需要。 你可以这样做：

 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

请注意，您必须更改单选按钮的id 。 否则无法使用 ID。 ID 必须是唯一的。

 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>