如何在两个选择框中使用添加和删除按钮并在数据库中提交

id选择器问题，在HTML和jQuery中将select-to改为select-to[]

获取提交时的选项值，使用map()

$('#submitButton').click(function(){
       var toSelected = $('#select-to option').map(function(){
          return $(this).val();
       }).get().join(',');
       console.log("TO SELECTED: "+ toSelected);
       var fromSelected = $('#select-from option').map(function(){
          return $(this).val();
       }).get().join(',');
       console.log("FROM SELECTED: "+ fromSelected);
});

$(document).ready(function() {
    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#submitButton').click(function(){
      
       var toSelected = $('#select-to option').map(function(){
          return $(this).val();
       }).get().join(',');
      
       console.log("TO SELECTED: "+ toSelected);
      
       var fromSelected = $('#select-from option').map(function(){
          return $(this).val();
       }).get().join(',');
      
       console.log("FROM SELECTED: "+ fromSelected);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
     <fieldset>
    <select name="selectfrom[]" id="select-from" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>
    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>
    <select name="selectto[]" id="select-to" multiple size="5">
    </select>
    <button id="submitButton">Submit</button>
  </fieldset>
</form>

由于[和]是元字符，因此使用''进行转义。

$('#select-to''['']')

$('#select-to[]')

文档

使用任何的元字符(如! " # $ %和 ;'()*+,./:;& lt; => ?@[]^ '{|}~)作为名称的文字部分，必须用两个反斜杠转义:''.

jQuery(function($) {
  $('#btn-add').click(function() {
    $('#select-from''[''] option:selected').each(function() {
      $('#select-to''['']').append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
      $(this).remove();
    });
  });
  $('#btn-remove').click(function() {
    $('#select-to''[''] option:selected').each(function() {
      $('#select-from''['']').append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
      $(this).remove();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <fieldset>
    <select name="selectfrom[]" id="select-from[]" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>
    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>
    <select name="selectto[]" id="select-to[]" multiple size="5">
    </select>
  </fieldset>
</form>