从第一个选择框中选择项目以填充第二个选择框答案

【问题标题】：Selecting Item from First Select Box to Populate Second Select Box从第一个选择框中选择项目以填充第二个选择框
【发布时间】：2020-04-27 08:54:19
【问题描述】：

我有一个包含两个选择字段的表单。第一个选择字段将列出项目，第二个选择字段将开始为空，但通过从第一个选择字段中选择一个项目并按下添加按钮来填充。你也可以这样做。您可以从第二个选择字段中选择一个项目，然后点击删除将其添加回第一个选择字段。最后，我希望第二个选择字段的所有值都在一个隐藏的表单框中，用逗号分隔。

我过去曾遇到过使用 javascript 的示例，但现在我需要它们，但我似乎找不到它们。有谁知道任何可以向我展示如何完成这样的事情的资源？起初，我想用 ajax 来做，但我宁愿不加载另一个页面。任何帮助我指出正确的方向将不胜感激！提前致谢！

<form name="SelectItem">
<select name="SelectItem">
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
</select>
<button>Add =></button>
<button><= Remove</button>
<select name="SelectedItems">
    <option value=""></option>

</select>
</form>

【问题讨论】：

标签： javascript forms select button option

【解决方案1】：

您可以使用 jquery append() 来做到这一点：

$(document).ready(function(){
  $('.add').click(function(){
    $('#select1').find('option:selected').appendTo('#select2');
  });

  $('.remove').click(function(){
    $('#select2').find('option:selected').appendTo('#select1');
  });  
});

Working pen

【讨论】：

谢谢，谢谢让我走上了我想做的事情的正轨。感谢您的帮助！

【解决方案2】：

您可以在select 元素上使用add() 和remove() 方法：

const select1 = document.getElementById('select1')
const select2 = document.getElementById('select2')

const addItem = () => {
    event.preventDefault();

    if(select1.length === 0)    return;

    let itemIndex = select1.selectedIndex;
    let item = select1.options[itemIndex];

    select1.remove(itemIndex)
    select2.add(item);  
}

const removeItem = () => {
    event.preventDefault();

    if(select2.length === 0)    return;

    let itemIndex = select2.selectedIndex;
    let item = select2.options[itemIndex];

    select2.remove(itemIndex)
    select1.add(item);   
}

document.getElementById('addButton').addEventListener('click', addItem);
document.getElementById('removeButton').addEventListener('click', removeItem);

<form name="SelectItem">
  <select name="SelectItem" id="select1">
      <option value="item1">Item 1</option>
      <option value="item2">Item 2</option>
      <option value="item3">Item 3</option>
  </select>

  <button id="addButton">Add =></button>
  <button id="removeButton"><= Remove</button>

  <select name="SelectedItems" id="select2">

  </select>
</form>

【讨论】：

我喜欢这个答案。不过我想知道，我将如何限制可以添加到第二个选择字段的项目数？
只要第一个选择字段中有项目，您就可以将它们添加到第二个选择字段。

【解决方案3】：

下面是一种利用事件委托技术的相对简单的方法：

const inSelectEl = document.querySelector('#in-item-list');
const outSelectEl = document.querySelector('#out-item-list');
const optionQuantity = inSelectEl.options.length;

const onClick = e => {
  if (e.target.tagName !== 'BUTTON') {
    return;
  }

  let a, b;

  if (e.target.id === 'add') {
    a = inSelectEl;
    b = outSelectEl;
  } else {
    a = outSelectEl;
    b = inSelectEl;
  }

  const selectedOption = a.options[a.selectedIndex];

  b.options[b.options.length] = selectedOption;
}

document.querySelector('#container').addEventListener('click', onClick);

<!-- Added container to enable event delegation -->
<div id="container">
  <select name="SelectItem" id="in-item-list">
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
  </select>
  <button id="add">Add =></button>
  <button id="remove"><= Remove</button>
  <select name="SelectedItems" id="out-item-list" />
</div>

【讨论】：