【JavaScript】DOM操作下拉框

最新推荐文章于 2023-03-18 00:00:46 发布
最新推荐文章于 2023-03-18 00:00:46 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： JavaScript JavaScript的基础与DOM编程 文章标签： javascript DOM jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/acmman/article/details/48109035
版权
DOM操作下拉框

这次要实现一个效果，如下图:


在左边选框里选择一个选项，点击"-->"，就会把该选项选到右边框里。
在左边选框里选择多个选项，点击"==>"，就会把多个选项选到右边框里。

在右边选框里选择一个选项，点击"-->"，就会把该选项选到左边框里。
在右边选框里选择多个选项，点击"==>"，就会把多个选项选到左边框里。

效果就是这样，下面我们来实现它:

实现源代码: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
</head>

<body>

	<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
	<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
	  <tr>
		<td width="126">
			<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
			<select name="first" multiple="multiple" size=10 class="td3" id="first">
			  <option value="选项1">选项1</option>
			  <option value="选项2">选项2</option>
			  <option value="选项3">选项3</option>
			  <option value="选项4">选项4</option>
			  <option value="选项5">选项5</option>
			  <option value="选项6">选项6</option>
			  <option value="选项7">选项7</option>
			  <option value="选项8">选项8</option>
			</select>    
		</td>
		<td width="69" valign="middle">
		   <input name="add"  id="add" type="button" class="button" value="-->" /> 
		   <input name="add_all" id="add_all"  type="button" class="button" value="==>" /> 
		   <input name="remove"  id="remove" type="button" class="button" value="<--" />
		   <input name="remove_all"  id="remove_all" type="button" class="button" value="<==" />
			</td>
		<td width="127" align="left">
		  <select name="second" size="10" multiple="multiple" class="td3" id="second">
			 <option value="选项9">选项9</option>
		  </select>
		</td>
	  </tr>
	</table>
	</div>
</body>
	<script language="javascript">
		window.οnlοad=function(){
			//选中的从左端移到右端
			document.getElementById("add").οnclick=function(){
				//获取select
				var firstElement=document.getElementById("first");
				
				//获取option
				var optionElements=firstElement.getElementsByTagName("option");
				var len=optionElements.length;
				
				//获取右边select
				var secondElement=document.getElementById("second");
				
				//遍历option
				for(var i=0;i<len;i++){
					/*selectedIndex表示当前被选中的选项的索引，从0开始。
					*如果没有被选中的selectedIndex=-1
					*如果有多个被选中，selectedIndex的值永远是第一个被选中的值
					*javaScript的数组是动态的数组，数组长度是可变的，索引值也在变
					*/
					//alert(firstElement.selectedIndex);
					if(firstElement.selectedIndex!=-1){
						secondElement.appendChild(optionElements[firstElement.selectedIndex]);
					}
				}
			}
			/********************************************************************/
			//全部从左端移到右端
			document.getElementById("add_all").οnclick=function(){
				//获取select
				var firstElement=document.getElementById("first");
				
				//获取option
				var optionElements=firstElement.getElementsByTagName("option");
				var len=optionElements.length;
				
				//获取右边select
				var secondElement=document.getElementById("second");
				
				//遍历option
				for(var i=0;i<len;i++){
					secondElement.appendChild(optionElements[0]);
				}
			}
			//选中的从右端移到左端
			document.getElementById("remove").οnclick=function(){
				//获取select
				var secondElement=document.getElementById("second");
				
				//获取option
				var optionElements=secondElement.getElementsByTagName("option");
				var len=optionElements.length;
				
				//获取左边select
				var firstElement=document.getElementById("first");
				
				//遍历option
				for(var i=0;i<len;i++){
					if(secondElement.selectedIndex!=-1){
						firstElement.appendChild(optionElements[secondElement.selectedIndex]);
					}
				}
			}
			/********************************************************************/
			//全部从右端移到左端
			document.getElementById("remove_all").οnclick=function(){
				///获取select
				var secondElement=document.getElementById("second");
				
				//获取option
				var optionElements=secondElement.getElementsByTagName("option");
				var len=optionElements.length;
				
				//获取左边select
				var firstElement=document.getElementById("first");
				
				//遍历option
				for(var i=0;i<len;i++){
					firstElement.appendChild(optionElements[0]);
				}
			}
			/************************************************************************/
			//双击的从左端移到右端
			document.getElementById("first").οndblclick=function(){
				var firstElement=document.getElementById("first");
				var optionElements=firstElement.getElementsByTagName("option");
				
				var secondElement=document.getElementById("second");
				for(var i=0;i<optionElements.length;i++){
					secondElement.appendChild(optionElements[firstElement.selectedIndex]);
				}
			}
			/************************************************************************/
			//双击的从右端移到左端
			document.getElementById("second").οndblclick=function(){
				var secondElement=document.getElementById("second");
				var optionElements=secondElement.getElementsByTagName("option");
				
				var firstElement=document.getElementById("first");
				for(var i=0;i<optionElements.length;i++){
					firstElement.appendChild(optionElements[secondElement.selectedIndex]);
				}
			}
		}	
	</script>
</html>

测试结果正常，编写成功！！虽然代码有些长，但是我们还是实现了这个效果，以后学精以后可以将代码适当的简化

转载请注明出处：http://blog.csdn.net/acmman/article/details/48109035

光仔December
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Dom——下拉菜单
zx2014567296的博客
07-17 949
下拉菜单 案例展示 效果如上图所示，当鼠标经过最上面的内容时出现下拉菜单，鼠标移开则隐藏。当鼠标移动到下拉菜单的选项时该选项背景颜色改变，如下图所示。 核心思想 上方内容用ul和li，每个li内包含超链接a；下拉菜单部分也是用ul和li。 为了能够让每个li都有鼠标经过事件，需要为所有li遍历获取，注册事件。 鼠标经过上方时，下拉菜单显示；鼠标离开上方和下拉菜单时隐藏。 代码 html部分 <ul class="nav"> <li> <a hr
下拉菜单之js
Jessicawh的博客
07-16 179
效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
javascript基于DOM实现省市级联下拉框的方法
10-24
主要介绍了javascript基于DOM实现省市级联下拉框的方法,可实现选择省份后出现对应城市下拉框选项的功能,非常具有实用价值,需要的朋友可以参考下
Html dom中的select, option_ 级联下拉列表
12-17
Dom查找_表单验证01_ 点击链接_添加一个div _表单验证02 _创建节点_ Html dom中的select, option_ 级联下拉列表；
DOM事件之简约下拉菜单
02-18
通过设置鼠标事件和键盘事件，实现下拉菜单的效果变换，界面简约，代码实用易学。
可输入的下拉框
07-03
纯js编写的可输入的下拉框
超详细的原生DOM选择器教程手把手教你学会DOM
00后的一位普通处女座前端程序员
09-21 682
现在大部分都是使用vscode作为编辑器，但是由于vscode对bind语法支持不是很好所以导致bind语法之后代码提示消失，这十分不友好，所以我们可以制作一个回调函数来解决问题。就相当于宁可杀错不可放过，但是有个弊端，就是当一组标签里面子标签的class样式如果有其他的操作，也会被清除掉。接下来我们来演示一下，为div添加鼠标悬浮当事件触发时为元素添加元素是active的事件。// 通过bind方案来简化代码，但是由于vscode的支持不友好，所有导致代码提示消失。方案2：先找到高亮的选项然后再清除。
javascript DOM简单实现下拉菜单的显示
weixin_55869175的博客
04-11 298
html代码展示： <div class="heade">一级标题</div> <ul class="bodye"> <li >二级标题</li> <li >二级标题</li> <li >二级标题</li> </ul> css： *{ margin: 0px; padding: 0px;
DOM操作Select下拉框
weixin_44540343的博客
07-18 1467
获取select选中的option值，修改选中的选项，添加选项option。 篮球 皮球 羽毛球
JavaScript DOM操作Select下拉框
侯春强的博客
10-14 2086
DOM操作Select下拉框： 获取select选中的option值，修改选中的选项，添加选项option。 function show() { var select = document.getElementById("h"); alert(select.value);//获取选中的值 } function change() {
JavaScript操作表单_动力节点Java学院整理
01-19
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。 HTML表单的输入控件主要有以下几种： 文本框，对应的<input type=”text”>，用于输入文本； 口令框，对应的<input type=”password”>，用于输入口令； 单选框，对应的<input type=”radio”>，用于选择一项； 复选框，对应的<input type=”checkbox”>，用于选择多项； 下拉框，对应的
javascript DOM编程实例(智播客学习)
01-19
并给我们讲解了很多关于如何去学习DOM的方法，觉得真的是受益匪浅啊.下面就几个我觉得比较好的例子和大家分享一下。 1.二级连动下拉菜单（一级是省份，二级是城市，要求一级选中省份，二级城市对应出现） 步骤：1）基本框架（HTML）：两个复选框，而第二个复选框里面开始应该是没有选项的，注意第一个下拉框会作为事件源，通过 onchange方法激发JavaScript中的功能实现部分。 代码如下: <xmp> <select id=”province” onchange=”selCity()”> <option>–选择省份–</option> <option>北京</option> <optio
js操纵dom生成下拉列表框的方法
12-09
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <title>利用dom生成下拉列表框</title> </head> <body onload=”
JavaScript,DOM事件下拉框选项(ul,li标签实现)
OYBY123的博客
03-18 371
地下城与勇士：创新世纪</li><li>CF:穿越火线</li>//点击里li,输出文本框获取。<li>英雄联盟</li><li>QQ飞车</li><li>生死狙击
DOM操作表单（select下拉选框）
liudanyang_21的博客
07-15 252
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="city" name="city" size="5"> <option value="CD">成都</option> <option value="CQ">重庆
DOM-节点操作-下拉菜单制作
NY_21的博客
02-01 254
如上图是一个简易的下拉菜单栏，我们可以通过操作节点来达到目的。1. 导航栏里面的li 都要有鼠标经过效果，所以需要循环注册鼠标事件 2. 核心原理： 当鼠标经过li 里面的 第二个孩子 ul 显示， 当鼠标离开，则ul 隐藏 DOM-节点操作-下拉菜单制作
【JavaScript】JavaScript的对象-在函数中修改参数值的问题
程序猿之洞
02-22 7092
在函数中修改参数值的问题 将基本数据类型的变量作为函 数参数传递的情况： function changeValue(x) { x=5; } var x=3; changeVlaue(x); alert(x);//此处的x为多少？ 其实形参是局部变量，当函数调用结束以后，用作形参的局部变量就会 不存在。即使在函数中修改了传
javascript 設置下拉框內容
最新发布
08-20
JavaScript可以使用`select`标签和`option`标签来设置下拉框的内容。 首先，需要获取到下拉框的DOM元素，可以使用`document.getElementById`方法根据标签的id属性获取到对应的元素。例如，如果下拉框的id为"mySelect"，可以使用以下代码获取到该下拉框元素： ```javascript var selectElement = document.getElementById("mySelect"); ``` 接下来，可以使用`appendChild`方法向下拉框添加选项。可以使用`document.createElement`方法创建`option`标签，然后使用`appendChild`方法将其添加到下拉框中。例如，可以使用以下代码向下拉框中添加三个选项： ```javascript var option1 = document.createElement("option"); option1.text = "选项1"; selectElement.appendChild(option1); var option2 = document.createElement("option"); option2.text = "选项2"; selectElement.appendChild(option2); var option3 = document.createElement("option"); option3.text = "选项3"; selectElement.appendChild(option3); ``` 以上代码中，通过`option.text`属性设置选项的显示文本。 最后，可以通过设置`option`元素的`value`属性来设置选项的值。例如，可以使用以下代码设置第一个选项的值为"value1"： ```javascript option1.value = "value1"; ``` 通过上述代码，JavaScript可以设置下拉框的内容。可以根据具体需求动态添加、修改或删除下拉框的选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

光仔December

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值