两个下拉列表进行选项传递操作

来源：互联网发布：java 占位符替换递归编辑：程序博客网时间：2024/05/03 12:19
最近需有个任务需要写两个下拉列表进行选项传递。参考了网上前辈写的列子：http://www.software8.co/wzjs/jquery/4120.html，于是对这个例子做了些修改。以下是修改后的代码，可能有bug。特别说明：其中有个配置IS_OP_PHONENO_FLAG，这个配置的作用是对选项手机号码做限制，如果配置值为true，则手机号码这个选项是可以操作的，否则，手机号码只能展示，不可以移动。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>两个select互动</title><style type="text/css">#div_OperSelectArea{width: 500px;}#div_leftSelect,#div_rightSelect,#div_buttonAddRemove,#div_butonOKAndCancell {display: block;}#div_leftSelect,#div_buttonAddRemove,#div_rightSelect,#div_UP_DOWN {float: left;}#div_butonOKAndCancell {clear: both;text-align: center;}#select_leftSelect,#select_rightSelect {width: 150px;height: 400px;}option {height: 20px;padding-left:3px ;padding-top:3px ;font-size: 12;}#table_ADD_REMOVE{width: 100px;}#table_UP_DOWN {width: 40px;}td {height: 50px;}</style><script type="text/javascript" src="jslib/jquery-1.9.1.js"></script><script type="text/javascript">//是否对手机号码做添加和移除操作  如果不对手机号做添加和移除操作，则手机号位于选择列表第一项，不可移动此选项var IS_OP_PHONENO_FLAG = false;/** * 保存操作 */function doOK() {alert($("#select_rightSelect").val());}/** * 关闭页面，不保存 */function doCancell() {alert($("#select_rightSelect").val());}$(document).ready(function() {//添加选中$('#add').click(function() {var options = $('#select_leftSelect option:selected');if(IS_OP_PHONENO_FLAG) {var remove = options.remove();remove.appendTo('#select_rightSelect');} else {for(i=0;i<options.length;i++){var value =$(options[i]).attr("value");if(value != "PHONE_NO"){$(options[i]).appendTo('#select_rightSelect');}}}});//移除选中$('#remove').click(function() {var options = $('#select_rightSelect option:selected');if(IS_OP_PHONENO_FLAG) {options.appendTo('#select_leftSelect');} else{for(i=0;i<options.length;i++){var value =$(options[i]).attr("value");if(value != "PHONE_NO"){$(options[i]).appendTo('#select_leftSelect');}}}});//添加全部$('#addAll').click(function() {var options = $('#select_leftSelect option');if(IS_OP_PHONENO_FLAG) {var remove = options.remove();remove.appendTo('#select_rightSelect');} else {for(i=0;i<options.length;i++){var value =$(options[i]).attr("value");if(value != "PHONE_NO"){$(options[i]).appendTo('#select_rightSelect');}}}});//移除全部$('#removeAll').click(function() {var options = $('#select_rightSelect option');if(IS_OP_PHONENO_FLAG) {options.appendTo('#select_leftSelect');} else{for(i=0;i<options.length;i++){var value =$(options[i]).attr("value");if(value != "PHONE_NO"){$(options[i]).appendTo('#select_leftSelect');}}}});//双击添加$('#select_leftSelect').dblclick(function() {var options = $('option:selected', this);if(IS_OP_PHONENO_FLAG) {var remove = options.remove();remove.appendTo('#select_rightSelect');} else {for(i=0;i<options.length;i++){var value =$(options[i]).attr("value");if(value != "PHONE_NO"){$(options[i]).appendTo('#select_rightSelect');}}}});//双击移除$('#div_rightSelect').dblclick(function() {var options = $('#select_rightSelect option:selected');if(IS_OP_PHONENO_FLAG) {options.appendTo('#select_leftSelect');} else{for(i=0;i<options.length;i++){var value =$(options[i]).attr("value");if(value != "PHONE_NO"){$(options[i]).appendTo('#select_leftSelect');}}}});/** * 当个选项向上移动 */$('#upMoveButton').click(function() {var options = $('#select_rightSelect option:selected');if (options.length>0) {var optionIndex0Value = $(options[0]).attr("value");//如果已选项是PHONE_NO且不可以操作PHONE_NO，则返回if(optionIndex0Value == "PHONE_NO" && !IS_OP_PHONENO_FLAG) {return;}//获取已选项在选择列表中的索引var allOptions = $('#select_rightSelect option');var index = -1;for(i=0;i<allOptions.length;i++){var value =$(allOptions[i]).attr("value");if(optionIndex0Value == value) {index = i;break;}}//如果选项是第一个选项，则不作任何操作if(index == 0){return;}//前一个选项是PHONE_NO并且PHONE_NO不可操作，则返回if($(allOptions[index-1]).attr("value") == "PHONE_NO" && !IS_OP_PHONENO_FLAG) {return;}//交换次序var tempPriorVar = allOptions[index-1];allOptions[index-1] = allOptions[index];allOptions[index] = tempPriorVar;//重新刷新列表var remove = allOptions.remove();remove.appendTo('#select_rightSelect');}});/** * 当个选项向下移动 */$('#downMoveButton').click(function() {var options = $('#select_rightSelect option:selected');if (options.length>0) {var optionIndex0Value = $(options[0]).attr("value");//如果已选项是PHONE_NO且不可以操作PHONE_NO，则返回if(optionIndex0Value == "PHONE_NO" && !IS_OP_PHONENO_FLAG) {return;}//获取已选项在选择列表中的索引var allOptions = $('#select_rightSelect option');var index = -1;for(i=0;i<allOptions.length;i++){var value =$(allOptions[i]).attr("value");if(optionIndex0Value == value) {index = i;break;}}//如果选项是最后一个选项，则不作任何操作if(index == allOptions.length-1){return;}//后一个选项是PHONE_NO并且PHONE_NO不可操作，则返回if($(allOptions[index+1]).attr("value") == "PHONE_NO" && !IS_OP_PHONENO_FLAG) {return;}//交换次序var tempPriorVar = allOptions[index+1];allOptions[index+1] = allOptions[index];allOptions[index] = tempPriorVar;//重新刷新列表var remove = allOptions.remove();remove.appendTo('#select_rightSelect');}});});</script></head><body><div id="div_OperSelectArea"><div id="div_leftSelect"><select id="select_leftSelect" multiple="true" size="20" ><option value="PHONE_NO" id="left_op_PHONE_NO">手机号码</option><option value="WangJIAYU" id="op_WangJIAYU">佳玉</option><option value="Smartisan T1" id="op_SmartisanT1">Smartisan T1</option><option value="Smartisan T2" id="op_SmartisanT2">Smartisan T2</option><option value="Smartisan T3" id="op_SmartisanT3">Smartisan T3</option><option value="JianGuo1" id="op_JianGuo1">JianGuo1</option><option value="Huawei" id="op_Huawei">Huawei</option><option value="Meizu" id="op_Meizu">Meizu</option><option value="Mi" id="op_Mi">Mi</option><option value="Letv" id="op_Letv">Letv</option><option value="Qiku" id="op_Qiku">360</option><option value="lenovo" id="op_lenovo">lenovo</option><option value="Moto" id="op_Moto">Moto</option><option value="sony" id="op_sony">sony</option><option value="coolpad" id="op_coopad">coolpad</option><option value="ZTE" id="op_ZTE">ZTE</option><option value="MS" id="op_MS">MS</option><option value="Nokia" id="op_Nokia">Nokia</option><option value="TCL" id="op_TCL">TCL</option><option value="OPPO" id="op_OPPO">OPPO</option><option value="VIVO" id="op_VIVO">VIVO</option><option value="Apple" id="op_Apple">Apple</option><option value="Sumsang" id="op_Sumsang">Samsang</option></select></div><div id="div_buttonAddRemove"><table id="table_ADD_REMOVE"><tbody><tr><td><input type="button" id="add" value="添加选中>>"></td></tr><tr><td><input type="button" id="remove" value="<<移除选中"></td></tr><tr><td><input type="button" id="addAll" value="全部添加>>"></td></tr><tr><td><input type="button" id="removeAll" value="全部移除<<"></td></tr></tbody></table></div><div id="div_rightSelect"><select id="select_rightSelect" multiple="true" size="20"><option value="PHONE_NO" id="right_op_PHONE_NO">手机号码</option></select></div><div id="div_UP_DOWN"><table id="table_UP_DOWN"><tbody><tr><td></td></tr><tr><td><input type="button" id="upMoveButton" value="↑"></td></tr><tr><td><input type="button" id="downMoveButton" value="↓"></td></tr><tr><td></td></tr></tbody></table></div><div id="div_butonOKAndCancell"><input type="button" onclick="doOK()" value="确定"><input type="button" onclick="doCancell()" value="取消"></table></div></div></body></html>
0 0