javascript - jquery 中的多选添加/删除选择

Question

在一个表单中，我有两个多项选择。我可以使用以下 jquery 函数将 select1 中的项目添加到 select2 或从 select2 中删除项目:

<script  type="text/javascript">
   function addProject() {    
      return !$('#select1 option:selected').remove().appendTo('#select2');
   }

   function removeProject() {
      return !$('#select2 option:selected').remove().appendTo('#select1');
   }
</script>

<select multiple id="select1" class="form-control">
@for(p <- projects) {
    option value="@p.getName">@p.getName</option>
}
</select>

<button type="button" class="btn btn-primary"  onclick="addProject();" >
   <span class='glyphicon glyphicon-plus'></span>
</button>
<button type="button" class="btn btn-primary"  onclick="removeProject();" >
   <span class='glyphicon glyphicon-minus'></span>
</button>

<select name="projects" multiple id="select2" class="form-control">
</select>

问题是，如果我向 select2 添加项目并提交表单，我会收到所有值。如果我添加和删除项目，反之亦然，我不会收到值。

我尝试添加另一个 jquery 函数来在提交表单之前选择 select2 中的所有项目，但没有成功。

function select_projects() {
    $('#select2').children('option').attr('selected', 'selected');
}

如何解决这个问题？

Answer 1

我解决了更改 select_projects() 函数的问题，如下所示:

function select_projects() {
    $('#select1 option:selected').attr('selected', false);
    $('#select2').children().prop('selected', true);
}