Радиокнопка добавления значений в раскрывающийся список

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

Обратите внимание, что вы должны изменить 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>

Answer 2

Обратите внимание, что вы дважды используете в своем коде идентификаторы, что недопустимо. HTML - идентификаторы должны быть уникальными. Либо измените их на классы, либо опустите, поскольку они могут быть не нужны. Сделать это можно так:

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>