两个下拉列表进行选项传递操作
2016-07-17 01:17
405 查看
最近需有个任务需要写两个下拉列表进行选项传递。参考了网上前辈写的列子：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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML基础课程笔记
- HTML基础学习之 --元素 定位
- HTML基础学习之 --网页的宽度、高度自适应
- html之内联元素与块状元素
- HTML页面获取URL参数
- HTML
- [备忘]没有为扩展名“.cshtml”注册的生成提供程序
- HTML--内联元素和块状元素--大全
- 自己整理的《网页设计与制作》语言，HTML总汇--从我的原博客中复制过来的
- HTML DOM 事件
- 网页、HTML标签的简单介绍
- html定位布局的认识
- border-collapse:collapse 这个小妖精！
- [HTML] 图片标签、绝对路径 和 相对路径
- HTML中的IE条件注释
- HTML自测题
- html页面通过特殊链接：打电话，发短信，发邮件详细教程
- HTML里form, table表示表格的时候有什么区别？
- 那些不被关注但很重要的html标签
- html空格