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

Question

HTML ：

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

javascript ：

<script>       
 $(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();
        });
    });

});

Answer 1

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>

Answer 2

由于[和]是元字符，因此请使用\\来逃避它。

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

而不是

$('#select-to[]')

Docs

  

使用任何元字符（例如！“＃$％＆amp;'（）* +，。/：;＆lt; =＆gt;？@ [] ^`{|}〜）作为文字作为名称的一部分，必须使用两个反斜杠进行转义：\\。

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>