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

Question

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

过去我曾用 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>

Answer 1

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

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

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

工作笔

Answer 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>

Answer 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>