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

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>

标签： javascriptformsselectbuttonoption

Answer 1

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

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

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

工作笔