基于JavaScript实现控制下拉列表


Posted in Javascript onMay 08, 2020

需求分析

在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品

技术分析

ondblclick="selectOne()":双击事件
select标签的属性multiple="multiple":

基于JavaScript实现控制下拉列表

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			步骤分析
				1. 确定事件: 点击事件 :onclick事件
				2. 事件要触发函数 selectOne
				3. selectOne要做一些操作
					(将左边选中的元素移动到右边的select中)
					1. 获取左边Select中被选中的元素
					2. 将选中的元素添加到右边的Select中就可以
		-->
		<script>
			
			function selectOne(){
//				1. 获取左边Select中被选中的元素
				var leftSelect = document.getElementById("leftSelect");
				var options = leftSelect.options;
				
				//找到右侧的Select
				var rightSelect = document.getElementById("rightSelect");
				//遍历找出被选中的option
				for(var i=0; i < options.length; i++){
					var option1 = options[i];
					if(option1.selected){
		//				2. 将选中的元素添加到右边的Select中就可以
						rightSelect.appendChild(option1);
					}
				}
			}
			
			//将左边所有的商品移动到右边
			function selectAll(){
//				1. 获取左边Select中被选中的元素
				var leftSelect = document.getElementById("leftSelect");
				var options = leftSelect.options;
				
				//找到右侧的Select
				var rightSelect = document.getElementById("rightSelect");
				//遍历找出被选中的option
				for(var i=options.length - 1; i >=0; i--){
					var option1 = options[i];
					rightSelect.appendChild(option1);
				}
			}
			
			
			
		</script>
	</head>
	<body>
		
		<table border="1px" width="400px">
			<tr>
				<td>分类名称</td>
				<td><input type="text" value="手机数码"/></td>
			</tr>
			<tr>
				<td>分类描述</td>
				<td><input type="text" value="这里面都是手机数码"/></td>
			</tr>
			<tr>
				<td>分类商品</td>
				<td>
					<!--左边-->
					<div style="float: left;">
						已有商品<br />
						<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
							<option>华为</option>
							<option>小米</option>
							<option>锤子</option>
							<option>oppo</option>
						</select>
						<br />
						<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="selectOne()"> >> </a> <br />
						<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="selectAll()"> >>> </a>
					</div>
					<!--右边-->
					<div style="float: right;"> 
						未有商品<br />
						<select multiple="multiple" id="rightSelect">
							<option>苹果6</option>
							<option>肾7</option>
							<option>诺基亚</option>
							<option>波导</option>
						</select>
						<br />
						<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > << </a> <br />
						<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <<< </a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提交"/>
				</td>
			</tr>
		</table>
	</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
JS检测图片大小的实例
Aug 21 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
Angular 应用技巧总结
Sep 14 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
JS数组的常用10种方法详解
May 08 #Javascript
如何实现js拖拽效果及原理解析
May 08 #Javascript
JS图片预加载三种实现方法解析
May 08 #Javascript
JavaScript ES6 Class类实现原理详解
May 08 #Javascript
JavaScript cookie原理及使用实例
May 08 #Javascript
JavaScript中的各种宽高属性的实现
May 08 #Javascript
element-ui 实现响应式导航栏的示例代码
May 08 #Javascript
You might like
用PHP实现验证码功能
2006/10/09 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
Node.js模块加载详解
2014/08/16 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python实现UDP协议下的文件传输
2020/03/20 Python
如何理解Python中的变量
2020/06/01 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
军训自我鉴定200字
2014/02/13 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
教师党员个人总结
2015/02/10 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL