JavaScript实例第十一天

于 2021-10-30 15:26:40 发布
阅读量96 收藏 1
点赞数
分类专栏： 前端Javascript实例 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51649346/article/details/121049784
版权
本文展示了五个JavaScript实现的下拉列表动态操作实例，包括动态添加、删除选项，二级、三级联动效果，以及可输入的下拉列表。通过这些实例，读者可以学习如何在网页中实现下拉菜单的动态交互，提高前端开发技能。
摘要由CSDN通过智能技术生成

2021.10.30

实例一、动态添加下拉列表选项框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加下拉列表选项框</title>
</head>

<body>
	<div id="id-vi-center">
	<select name="id-selectColor" id="id-select">
		<option>请选择...</option>
		<option value="red">Red</option>
		<option value="green">Green</option>
		<option value="blue">Blue</option>
		
		</select>
		<p>请选择颜色:</p><br>

		<input type="radio" name="red" value="red" onClick="stSelValue(this.id)">Red
		<input type="radio" name="red" value="green" onClick="stSelValue(this.id)" >Green
		<input type="radio" name="red" value="blue" onClick="stSelValue(this.id)">Blue<!-- 当radio多个选项的name值属性相同时表示成单选，只能选一个 -->
		
	</div>
</body>
	<script type="text/javascript">
	window.onload=function(ev){
		var idSel=document.getElementById("id-select");
		var arrRadio=document.getElementsByName("radio");
		for(var i=0;i<arrRadio.length;i++){
			if(arrRadio[i].checked){
				idSel.value=arrRadio[i].value;
				
			}
			
		}
		
	}
	function stSelValue(val){
		var idSel=document.getElementById("id-select");
		idSel.value=val;
		
	}
	
	</script>
</html>

实例二、动态添加下拉列表框选项

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加下拉列表框选项</title>
</head>

<body>
	<div id="id-vid-center">
	<table>
		<tr>
		<th>设置颜色：</th>
			<td>
			<select name="selSetColor" id="idSel">
				<option>请选择...</option>
				<option value="red">Red</option>
				<option value="green">Green</option>
				<option value="blue">Blue</option>
				</select>
			</td>
		<th>添加颜色:</th>
			<td><input type="button" id="id-add-color" value="添加颜色" onClick="addColor()"></td>
		</tr>
		<tr>
		<td></td>
			<td></td>
			<td>value:</td>
			<td><input type="text" id="id-sel-val" value=""></td>
		
		</tr>
		<tr>
		<td></td>
			<td></td>
			<td>text:</td>
			<td><input type="text" id="id-sel-text" value=""></td>
		
		</tr>
		</table>
	
	</div>
		
		
</body>
	<script type="text/javascript">
	function addColor(){
		var value=document.getElementById("id-sel-val");
		var text=document.getElementById("id-sel-text");
		var idSel=document.getElementById("idSel");
		var val=value.value;
		var te=text.value;
		var opt=new Option(val,te);//第一个是value值，第二个是text值
		idSel.options.add(opt);
		
	}
	</script>
</html>

实例三、动态删除下拉列表框选项

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态删除下拉列表框选项</title>
</head>

<body>
	<div id="id-div-center">
	<table>
		<tr>
		<th>设置颜色：</th>
			<td>
			<select name="selSetColor" id="idSel">
				<option>请选择...</option>
				<option value="red">Red</option>
				<option value="green">Green</option>
				<option value="blue">Blue</option>
				</select>
			</td>
		</tr>
		<tr>
		<td>删除选项:</td>
			<td><input type="button" id="id-remove" value="删除颜色" onClick="removeColor()"></td>
		</tr>
		<tr>
		<td>全部删除:</td>
			<td><input type="button" id="id-allremove" value="全部删除" onClick="removeAllColor()"></td>
		</tr>
		
		</table>
	
	</div>
</body>
	<script type="text/javascript">
	function removeColor(){
		var idSel=document.getElementById("idSel");
		idSel.options.remove(idSel.selectedIndex);//选择框内是哪个颜色就会对应颜色的指数，删除该颜色
		
		
	}
		function removeAllColor(){
		var idSel=document.getElementById("idSel");
		idSel.options.length=0;
		
		
	}
	</script>
</html>

实例四、二级联动下拉列表框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级联动下拉列表框</title>
</head>

<body>
	<div id="id-div-center">
	<form name="form2sel">
		大洲:
		<select name="continent" onchange="sel_country()"><!-- onchange在值改变时触发 -->
		<option value="0">选择大洲...</option>
		<option value="亚洲">亚洲</option>
			<option value="欧洲">欧洲</option>
			<option value="美洲">美洲</option>
		</select>
		国家:
		<select name="country">
		<option value="0">选择国家...</option>
		</select>
		</form>
	
	</div>
</body>
	<script type="text/javascript">
	var country=[
				 ["中国","日本","韩国"],
				 ["英国","德国","法国"],
				 ["美国","巴西","阿根廷"]
				];
		function sel_country(){
			var selContinent=document.form2sel.continent;//获取大洲的下拉选择框对象
			var selcountry=document.form2sel.conutry;//获取国家的下拉选择框对象
			var arrcont=country[selContinent.selectedIndex-1];//获取大洲对应的国家数组,数组从0开始，所以要-1
		 // selcountry.length=1;
			for(var i=0;i<arrcont.length;i++){
				var atr=new Option(arrcont[i],arrcont[i])
				selcountry[i+1].options.add(atr)//数组还原成下拉列表是，序号从1开始，+1
				
			}
			
			
		}
	
	</script>
</html>

实例五、三级联动下拉列表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动下拉列表框</title>
</head>

<body>
	<div id="id-div-center">
		<form name="form3sel">
			大洲:
	<select name="continent" onChange="sel_country()">
		
		<option value="0">选择大洲...</option>
		<option value="亚洲">亚洲</option>
			<option value="欧洲">欧洲</option>
			<option value="美洲">美洲</option>
		
		</select>
			国家:
		<select name="country" onChange="sel_city()">
		<option value="0">选择国家...</option>
		</select>
			城市:
		<select name="city">
		<option value="0">选择城市...</option>
		</select>
	</form>
	</div>
</body>
	<script type="text/javascript">
	var country=[
				 ["中国","日本","韩国"],
				 ["英国","德国","法国"],
				 ["美国","巴西","阿根廷"]
				];
		var city=[
				 [["北京","伤害","广州"],["东京","大阪","名古屋"],["首尔","仁用","济州"]],
				 [["伦敦","曼彻斯特","2"],["3","4","5"],["6","7","8"]],
				 [["9","10","11"],["12","13","14"],["15","16","17"]]
			
				];
	function sel_country(){
		var selContinent=document.form3sel.continent;//州
		var selCountry=document.form3sel.country;//国家
		var selCity=document.form3sel.city;//城市
		var arrContinentCountry=country[selContinent.selectedIndex-1]
		selCountry.length=1;//清空国家
		selCity.length=1;//清空城市
		for(var i=0;i<arrContinentCountry.length;i++){
			
			selCountry[i+1]=new Option(arrContinentCountry[i],arrContinentCountry[i])//将continetn的数值值赋值到selCountry中，完成选择州时国家的变化
			
			
		}
	}
		function sel_city(){
		var selContinent=document.form3sel.continent;//州
		var selCity=document.form3sel.city;//城市
			var selCountry=document.form3sel.country;//国家
			var arrCountryCity=city[selCountry.selectedIndex-1]
			selCity.length=1;
			for(var i=0;i<arrCountryCity.length;i++){
				selCity[i+1]=new Option(arrCountryCity[i],arrCountryCity[i])
				
				
			}
			
			
			
		}
	</script>
</html>

三级联动，在二级联动的函数方法中将下拉列表的初始值清零（保留第一项），在二级选项框发生改变时触发三级联动，以此类推四级、五级…

实例六、可输入的下拉列表框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>可输入的下拉列表框</title>
</head>

<body>
	<style type="text/css">
		div#id-div-center{
			position: relative;/*position将元素从页面中分离出来,相对定位*/
			width: 320px;
			height: auto;
			border: 0px solid black;/* #通过id匹配，对id为id-div-center进行css排版，*/
			margin: 32px auto;/*外边距，auto自适应*/
			padding: 2px;/*内边距*/
		}
		div#id-div-center span{
			overflow: hidden;/*规定当前元素溢出时的处理，hidden内容被修剪，并且被修剪的内容没有滚轮，看不到*/
			margin-left: 100px;
			width:18px;
			
		}
		div#id-div-center select{
			width: 128px;
			margin-left: -100px;
			
			
		}
		div#id-div-center input{
			position: absolute;/*绝对定位，脱离文档流的布局*/
			width: 105px;
			height: 14px;
			left: 98px;
			
			
		}
	</style>
	
	
	<div id="id-div-center" style="">
		<span style="">
		<select id="id-sel" onChange="sel_input(this.id)">
			<option value="html">HTML</option>
			<option value="js">JS</option>
			<option value="css">CSS</option>
			
			</select>
		
		</span>
	<input id="id-input" style="">
	</div>
</body>
	<script type="text/javascript">
	function sel_input(thisid){
		var sel=document.getElementById(thisid);
		var input=document.getElementById("id-input")
		input.value=sel.options[sel.selectedIndex].text;
		
		
	}
	
	</script>
</html>

这个css布局没写好，经验不足

APinBom
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值