Question

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

CREATE VIEW _tmp_v_aaa 
AS 
SELECT
  id,
  [value] = CAST((CASE WHEN ISNUMERIC([value]) = 1 THEN [value] ELSE NULL END) AS INT)
FROM _tmp_aaa 
WHERE [value] LIKE '1%' 
   AND ISNUMERIC([value]) = 1

在上面的示例中，当我从两个（Excel字段，数据库字段）列表中选择项目并单击ADD PAIR时，它应该在映射列表下显示该对，并且应从相应列表中删除相应的项目。当我从映射列表中选择一个项目并单击删除对时，它应该从映射列表中删除该项目并将各个项目添加到相应的列表中。我的问题是有任何jquery插件来实现这个。在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配对项目

1 个答案: