多选select实现左右添加删除

案例：实现效果

　　1.选择监控城市，车辆列表显示对应城市所有车辆

　　2.从左边选择车辆单击 >> 实现右侧显示添加车辆，左侧对应移除已选择车辆

　　3.右侧选中车辆单击 << 实现右侧移除车辆信息，左侧显示对应移除过来的车辆

逻辑实现：

1.监控城市 select 添加 onchange事件函数，获取城市value 利用Ajax调取数据，通过回调函数创建options填充车辆列表 options

<div class="form-group" id="test1" >
            <label class="col-sm-2 control-label">监控城市:</label>
            <div class="col-sm-2">
                <select class="form-control" name="region_group[]" multiple="multiple" id="region_0"  onChange="getCars(this)"  >
                    {foreach from=$cities item='city'}
                    <option value="{$city.city}">{$city.region_name}</option>
                    {/foreach}
                </select>
                <span id="regionSpan"></span>

            </div>
        </div>

getCars()函数

function getCars(region_id) {
    var region_id=[];
    var obj = document.getElementById("region_0");
    for(var i=0;i<obj.options.length;i++){
        if(obj.options[i].selected){
            region_id.push(obj.options[i].value);// 收集选中项
        }
    }
    document.getElementById("carSpan").innerHTML = '';
   Ajax.call('?is_ajax=1&act=getCars', 'region_id=' + region_id,selectCarCallback, 'POST', 'JSON') ;
}

selectCarCallback回调函数：

function selectCarCallback(res, ss) {
    var board = document.getElementById("carSpan");
      if(res.content.obj.length==0){
        return ;
      }
    for (a in res.content.obj) {
        if(a=="toJSONString")
        continue ;
        var e3 = document.createElement("option");
        e3.innerHTML=res.content.obj[a].id+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+
                 res.content.obj[a].car_name+"("+
                 res.content.obj[a].number+")</br>";
        e3.setAttribute("value", res.content.obj[a].id);
        var object1 = board.appendChild(e3); //填充options
      }
}

2.左侧右移，右侧左移实现：

　　@1.单击右移，左移时，首先判断是否有车辆选中，取得carspan option:selected 判断对象的长度

　　@2. 取得选中的对象数组 append到右侧即可

个人小疑问：当append的时候，，右侧添加而左侧相应会移除？为什么？，可能是jquery获取的对象的原因，对象的唯一性

　　当使用jquery append() 方法添加对象元素时，对象唯一只能添加到一个地方

例如：

　　　取得selectedOptions对象想添加到两个select里面，而结果总是只显示在最后面append的select里(自我理解为jquery获取对象的唯一性)

　　　var selectedOptions=$('#carSpan option:selected');

　　　$('#selectCarSpan').append(selectedOptions);

　　　$('#carSpan').append(selectedOptions);

$(document).ready(function() {
    $('#move-all').on('click',function() {
        if ($('#carSpan option:selected').length) {
            var selectedOptions = $('#carSpan option:selected');
            $('#selectCarSpan').append(selectedOptions);
        } else {
            alert('您还没有选中要添加的车辆，请在左侧选择!')
        }
    })

    $('#canel-all').on('click',function() {
        if ($('#selectCarSpan option:selected').length) {
            var selecteds=$('#selectCarSpan option:selected');
            $('#carSpan').append(selecteds);
            $('#selectCarSpan option:selected').remove(); //移除之前先左侧添加
        } else {
            alert('您还没有选中要删除的车辆，请在右侧选择!')
        }
    })
    
})

延伸：

　　若左移时左侧的option不移除，在选择左移时需要判断右侧是否已经存在需要移动的options

//取差集
function getDifferenceSet() {
    var carSpan = $('#carSpan option:selected');
    var selectCarSpan = $('#selectCarSpan option');

    var selected = [];
    for (var k=0; k<selectCarSpan.length; k++) {

        selected.push(selectCarSpan[k].value);
    }

    if (selectCarSpan.length) {
        var differenceSet = [];
        for (var i=0; i<carSpan.length; i++) {
            if (jQuery.inArray(carSpan[i].value,selected) < 0) {
                differenceSet.push(carSpan[i]);
            }
        }
        return differenceSet;

    } else {
        return carSpan
    }
    
}