文章/答案/技术大牛

发布

社区首页 >问答首页 >单选按钮向下拉列表中添加值

问单选按钮向下拉列表中添加值
EN

Stack Overflow用户

提问于 2020-05-28 10:42:54

回答 2查看 317关注 0票数 1

我正在尝试填充一个下拉列表，其中包含一个基于被选中的单选按钮的值。单选按钮可以添加到列表中，也可以从选择收音机的列表中删除。

我成功地为文本字段和提交按钮编写了代码，但我需要使用单选按钮。任何帮助都是非常感谢的。

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>

javascript

html

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-28 11:29:55

请注意，您必须更改单选按钮的id。否则，就不能使用ids。Ids必须是唯一的。

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>

票数 0

Stack Overflow用户

发布于 2020-05-28 11:27:24

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

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62062769

复制

相似问题

问单选按钮向下拉列表中添加值
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单选按钮向下拉列表中添加值EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单选按钮向下拉列表中添加值
EN