`
pandong8183
  • 浏览: 56295 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JQuery:两个多选框的移动

 
阅读更多
window.onload=function(){

	//moveOneToRight为网页中某个按钮的ID,menuList和roleMenuList为两个下拉框
	$("#moveOneToRight").click(function(){
		var menuList = $("#menuList");
		var roleMenuList = $("#roleMenuList");
		moveSelect(menuList,roleMenuList,true);
	});
}

/**
 * 两个下拉框的多选操作函数
 * @param {} startSelect 起点下拉框
 * @param {} endSelect 终点下拉框
 * @param {} model true多选移动 false全部移动
 */
function moveSelect(startSelect,endSelect,model){
	var options = null;
	if(model){
		options = startSelect.find("option:selected");
	}else{
		options = startSelect.children();
	}
	if(options.length == 0){
		alert("请选择一个选项!");
		return;
	}
	options.each(function(){
		var val = $(this).val();
		var txt = $(this).text();
		//检查一下这个值是否已经保存过去了
		var flag = false;
		endSelect.children().each(function(){
			if(val == $(this).val()){
				flag = true;
			}
		});
		//根据是否找到了该元素决定是否将选项添加过去
		if(flag == false){
			endSelect.append("<option value='"+val+"'>"+txt+"</option>");
		}
	});
	//添加完毕后这边删除
	options.remove();
}

 

分享到:
评论

相关推荐

    jquery select多选框的左右移动 具体实现代码

    代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...&lt;head&gt; &lt;... charset=gb2312″ /&gt; &lt;...script type=”text/javascript”

    超实用的jQuery代码段

    6.16 在两个Tab标签之间进行元素拖动 6.17 拖动表格选择多行数据 6.18 拖动表格时自动选中复选框 6.19 拖动表格行并放置到目标位置 6.20 表格的拖动排序 6.21 拖动调整控件的大小 6.22 调整控件大小时设置调整约束 ...

    jQuery详细教程

    hide() 和 show() 都可以设置两个可选参数:speed 和 callback。 语法: $(selector).hide(speed,callback) $(selector).show(speed,callback) speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", ...

    jQuery攻略.pdf

    101 4.10 把样式应用到选项和表格按钮 104 4.11 一步选择或取消所有的复选框 107 4.12 验证两个字段 110 4.13 验证密码和确认密码字段是否匹配 113 4.14 禁用某些字段 116 4.15 验证整个表单 118 4.16 表单数据序列...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery...

    CryptoCurrency_Tracker:CryptoCurrency Tracker SPA,高度依赖jQuery和Ajax(RESTful API)

    切换复选框的ID将保存并存储在localStorage中。 假设在最可能的情况下,如果用户希望在“ X”日查看特定硬币的实时报告,则他还希望在返回站点的当天再次跟踪相同的硬币。 单击“显示更多信息”按钮时检索到的其他...

    PHP100视频教程全集112集BT种子【PHP经典】

    ... ... ... ...PHP100视频教程41:PHP站内搜索、多关键字、加亮显示 ...PHP100视频教程45:如何用PHP开发一个完整的... PHP100视频教程111:Jquery案例 之 复选框与隔行换色 PHP100视频教程112:Jquery案例 之 双击编辑异步更新

    multi.js:用户友好的替代品,用于启用了多个属性的选择框

    multi.js multi.js是具有multiple属性的选择框的一种用户友好... 通过将存储库克隆或下载到您的项目中并将两个文件都包括在dist目录中来手动安装。 &lt; link rel =" stylesheet " type =" text/css " href =" mul

    零基础学HTML CSS源代码

    复选框.htm 表单复选框的用法。 密码框.htm 表单密码框的用法。 文本框.htm 表单文本框的用法。 文本域.htm 表单文本域用法。 下拉表.htm 表单下拉表的用法。 表单实例手把手....

    程序员开发代码编辑器 CodeLobster IDE Pro 1.9.0 中文多语免费版.zip

    就额外的工具而言,可以使用代码验证器检查任何错误,编辑代码片段并更改代码格式,按各种标准对文本进行排序,进行代码转换(例如HTML到PHP,7位编码到字符),并在两个并排窗格之间同步滚动。 这些只是 ...

    ExtAspNet_v2.3.2_dll

    +TreeNode的前面的多选框可以自动回发了。 -为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    +TreeNode的前面的多选框可以自动回发了。 -为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加...

Global site tag (gtag.js) - Google Analytics