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

debugcn 发表于 Dev

麦克

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

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

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>

miile7

请注意，您必须更改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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。