当前位置: 代码迷 >> Web前端 >> JQuery:两个多选框的腾挪
  详细解决方案

JQuery:两个多选框的腾挪

热度:47   发布时间:2012-10-07 17:28:51.0
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();
}

?

  相关解决方案