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

时间：2020-05-28 10:42:54

标签： javascript html jquery

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

我设法为文本字段编写代码并提交按钮，但是我需要使用单选按钮。真的很感谢您的帮助。

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>

2 个答案:

答案 0 :(得分：0)

请注意，您在代码ID中使用了两次，这是无效的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>

答案 1 :(得分：0)

请注意，您必须更改单选按钮的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>

相关问题
最新问题