Jquery 项目配对

Question

我想使用列表和 jquery 实现配对系统。

 Excel Fields               DB Fields               Mapping
    email                   name                    email+emailId
    address                 emailId         >>      empId+empcode
    name                    empcode      (ADD PAIR)
    empId                   address
                                           <<
                                        (REMOVE PAIR)

在上面的示例中，当我从两个（Excel 字段、数据库字段）列表中 select 项并单击添加对时，它应该在映射列表下显示该对，并且应删除相应的项从各自的名单。当我 select 映射列表中的一个项目并单击删除对时，它应该从映射列表中删除该项目并将各个项目添加到相应的列表中。我的问题是有任何 jquery 插件可以实现 this.OR Web 上可用的任何示例，这些示例说明了这是如何完成的。提前致谢！

Answer 1

这可以通过简单的 JQuery 来实现。不需要任何插件。

$(document).ready(function(){
    $('#btn-add').click(function(){
    
    var selected1 = $('#select-from1 option:selected');
    var selected2 = $('#select-from2 option:selected');
    
      if(selected1.length == 0 || selected2.length == 0){
  alert("Please select options from both the select boxes");
  return;
  }
      
    $('#select-to').append("<option data-val1='"+selected1.val()+"' data-val2='"+selected2.val()+"' data-text1='"+selected1.text()+"' data-text2='"+selected2.text()+"' value='"+selected1.val()+"+"+selected2.val()+"'>"+selected1.text()+"+"+selected2.text()+"</option>");
    selected1.remove();
 selected2.remove();
    
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
   var select1_val = $(this).attr("data-val1");
   var select2_val = $(this).attr("data-val2");
   var select1_text = $(this).attr("data-text1");
   var select2_text = $(this).attr("data-text2");
   
   $('#select-from1').append("<option value='"+select1_val+"'>"+select1_text+"</option>");
   $('#select-from2').append("<option value='"+select2_val+"'>"+select2_text+"</option>");
   
            $(this).remove();
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<select name="selectfrom" id="select-from1" 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>
 
 <select name="selectfrom" id="select-from2" 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>

Jquery 项目配对

Jquery pairing of items

javascript

jquery

jquery-plugins

jquery-ui-sortable