案例:实现效果

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

多选select实现左右添加删除的更多相关文章

  1. WPF下的Richtextbox中实现表格合并,添加删除行列等功能

    .Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...

  2. select Option(增加,删除,清空)

    jQuery获取Select选择的Text和Value: $("#select_id").change(function(){//code...}); //为Select添加事件, ...

  3. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 用SQL语句添加删除修改字段_常用SQL

    1.增加字段     alter table docdsp     add dspcodechar(200)2.删除字段     ALTER TABLE table_NAME DROP COLUMNc ...

  5. 用SQL语句添加删除修改字段

    1.增加字段     alter table docdsp     add dspcodechar(200)2.删除字段     ALTER TABLE table_NAME DROP COLUMNc ...

  6. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

  7. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  8. SQL语句添加删除修改字段及一些表与字段的基本操作

    用SQL语句添加删除修改字段 1.增加字段     alter table docdsp    add dspcode char(200)2.删除字段     ALTER TABLE table_NA ...

  9. 添加/删除-HTML DOM 常用对象 -BOM-打开和关闭窗口- history-location

    1. 添加/删除 3步: 1. 添加一个空元素 var a=document.createElement("a"); <a></a> 2. 定义元素的关键属 ...

随机推荐

  1. cygwin with openssh

    新建系统变量 CYGWIN=ntsec path添加 ;c:\cygwin\bin 之后参考http://blog.csdn.net/benkaoya/article/details/8884677 ...

  2. kafka集群扩容以及数据迁移

    一 kafka集群扩容比较简单,机器配置一样的前提下只需要把配置文件里的brokerid改一个新的启动起来就可以.比较需要注意的是如果公司内网dns更改的不是很及时的话,需要给原有的旧机器加上新服务器 ...

  3. PDO 提供了三种不同的错误处理模式

    PDO::ERRMODE_SILENT 此为默认模式. PDO 将只简单地设置错误码,可使用 PDO::errorCode() 和 PDO::errorInfo() 方法来检查语句和数据库对象.如果错 ...

  4. CSS3动画变形Animations

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(22)-权限管理系统-模块导航制作

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(22)-权限管理系统-模块导航制作 最近比较忙,系统难度独步增加,文章的发布速度明显比以前慢了. 由于我们 ...

  6. 屏蔽全部统计代码(51.la cnzz 百度统计 谷歌分析师adsense、屏蔽淘宝客广告代码)的方法

    支持百度统计 .51.la统计.cnzz统计.51yes统计.谷歌分析师.阿里妈妈淘宝客广告.chinaz弹窗.假设有很多其它的须要屏蔽的,欢迎联系 default7#zbphp.com 改动etc的 ...

  7. iOS-iPad开发之SplitViewController简单介绍

    iOS-iPad开发之SplitViewController简单介绍 SplitViewController图形化创建 SplitViewController可以并列显示两个view,适用于基于nav ...

  8. cordova 消息推送,告别,消息推送服务器,和 苹果推送证书

    cordova plugin add org.apache.cordova.vibration cordova plugin add https://github.com/katzer/cordova ...

  9. error: device not found - waiting for device -

    执行 cocos run -p android 时报的这个错误 连接上 android 手机, 手机开启开发者模式.  设置--其他高级设置--开发者选项--USB 调试

  10. PHP错误类型及屏蔽方法

    1. 注意(Notices)这些都是比较小而且不严重的错误,比如去访问一个未被定义的变量.通常,这类的错误是不提示给用户的,但有时这些错误会影响到运行的结果. 2. 警告(Warnings)这就是稍微 ...