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

最新推荐文章于 2022-08-27 22:26:44 发布
最新推荐文章于 2022-08-27 22:26:44 发布
阅读量663 收藏
点赞数 1
分类专栏： Html&Javascript&Css 文章标签： Html下拉列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ancoa/article/details/51929161
版权

最近需有个任务需要写两个下拉列表进行选项传递。参考了网上前辈写的列子：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" οnclick="doOK()" value="确定">
				<input type="button" οnclick="doCancell()" value="取消">
			</table>
			</div>
		</div>
	</body>
</html>

ancoa
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript级联下拉列表实例代码(自写)
10-27
通过动态设置`s2`的`options`属性，来实现两个下拉列表的级联效果。 页面的样式是使用内联CSS定义的，包括设置下拉列表的宽度、背景颜色等。为了让用户界面更加友好，还可以添加更多的样式和交互元素，如过渡动画、...
php下拉选项的批量操作的实现代码
12-19
- `_delete`、`_verify`：这两个方法可能分别对应删除和更新数据库中的记录，例如，`_delete`可能会使用`$ids`参数来执行删除操作，而`_verify`会更改指定ID的广告状态。 6. **数据库操作**： - 在`_delete`和`_...
select两个关联的下拉列表
weixin_30632089的博客
10-31 508
今天用到两个关联的select，整理一下代码，仅供参考 如下： <html> <head> <meta charset="UTF-8"> <title></title> </head> <script language="javascript"> function chang...
2个下拉列表中的元素相互移动
yushu778的博客
03-21 849
案例完成代码与解析
select 传二个值_JavaScript 二级下拉列表 点第一个显示 第二个；
weixin_34093753的博客
01-22 195
1.onchange事件 确定2.创建一个 数组城市组；3.遍历二维数组城市 组 因为把i 与 option选择的值比对；还有 就是因为 列表一层；内容一层；如何 列表的一层 相同；内容层 显示；4.获取用户选择的省份 (如何比对:在select 里 返回 this.value 然后再 option添加)5.将遍历内容进行 比较6.如果相同遍历 其所有城市 因为在每一个内容里面添加一个 opt...
tkinter如何实现下拉框联动
daitianjun的博客
08-27 1819
有些小伙伴想在GUI界面上实现像前端一样的下拉框联动的效果，但是前端可以通过Ajax实现，python中的tkinter模块如何实现
2个select下拉框值互相传递
hxj1225的专栏
01-21 973
2个select下拉框值互相传递
js操纵dom生成下拉列表框的方法
10-26
2. 接着，在`<script>`标签内编写JavaScript代码，实现动态生成下拉列表选项的功能。利用JavaScript提供的`document.createElement`方法来创建`<option>`元素。 3. 使用`setAttribute`方法设置每个`<option>`元素的...
JQuery 使用attr方法实现下拉列表选中
10-25
示例中HTML部分定义了一个下拉列表，包含几个选项，其中value属性值为3的元素是需要被选中的选项。JQuery脚本通过ID选择器("#category")选中下拉列表，并通过属性选择器("[value=3]")进一步精确定位到value属性值为3...
基于layui的下拉列表的数据回显方法
10-16
通过静态页面的JavaScript代码直接操作DOM元素来实现数据回显，而动态网页则结合后端传递的数据和layui的监听事件机制，实现级联下拉列表的数据回显。理解这些知识点对于提升Web前端开发的用户体验具有重要意义。
两个下拉框的动态变化
VON
03-10 1811
本来我的一个模块当中，根据条件查询是下拉框里面的值是从数据库取来，事先放好的。 题型里面是单项多选填空等题型，科目里面是全部科目，根据你的选择来进行查询。 师哥让我修改成，选择不同的题型，科目里面是不一样的这样的功能： 首先是要归功于这篇实例的引导： http://www.jb51.net/article/35279.htm  其次，让我对js的用法进一步深刻理解。什么
jquery 多选下拉菜单、加搜索功能 select2
qi琪的专栏
12-28 2万+
上一篇介绍了自动补全功能的插件autocomplete 。这一篇介绍下select2这款插件。效果类似于 下图下载所需的文件，引用 <link href="/temp/skin1/ebay/js/select2/select2.min.css" rel="stylesheet" /> <script src="/temp/skin1/ebay/js/select2/select2.min.j
Tkinter的下拉列表Combobox
热门推荐
木东的博客
11-22 4万+
tk中下拉列表使用ttk.Combobox，代码如下： #!/usr/bin/env python # -*- coding: utf-8 -*- import tkinter as tk from tkinter import ttk win = tk.Tk() win.title("Python GUI") # 添加标题 ttk.Label(win, text="Chooes
Angular 自定义下拉列表组件实现
这样，父组件只需要引入`GradeSelectComponent`，并通过`@Input`传递默认值，通过`@Output`监听选中值的变化，就可以在多个地方方便地使用这个下拉列表组件，避免了重复编写相同代码的问题，提高了代码的可维护性和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值