JS实现二级联动 (createTextNode，createElement )

待我称王封你为后i 2022-05-15 16:21 196阅读 0赞

JS中只有数组，没有集合

数组长度=角标+1    长度可变

cities\[0\],cities\[1\],cities\[2\],cities\[3\]

cities\[100\]   长度是101   而不是5

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			//1.创建一个二维数组用于存储省份和城市
    			var cities = new Array(3);
    			cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
    			cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
    			cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
    			cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
    			
    			function changeCity(val){
    				
    				//7.获取第二个下拉列表
    				var cityEle = document.getElementById("city");
    				
    				//9.清空第二个下拉列表的option内容
    				cityEle.options.length=0;
    				
    				//2.遍历二维数组中的省份
    				for(var i=0;i<cities.length;i++){
    					if(val==i){
    						for(var j=0;j<cities[i].length;j++){
    							var textNode=document.createTextNode(cities[i][j]);
    							var opEle = document.createElement("option");
    							opEle.appendChild(textNode);
    							cityEle.appendChild(opEle);
    						}
    					}
    				}
    			}
    		</script>
    		
    	</head>
    
    	<body>
    		<form action="#">
    			<select onchange="changeCity(this.value)">
    				<option>--请选择--</option>
    				<option value="0">湖北</option>
    				<option value="1">湖南</option>
    				<option value="2">河北</option>
    				<option value="3">河南</option>
    			</select>
    			<select id="city">
    				
    			</select>
    		</form>
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ajax,js实现省市二级联动

Ajax，js实现省市二级联动这里不罗嗦，直接放图，分析。如图实现效果。如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

迷南。/ 2024年02月19日 12:40/ 0 赞/ 72 阅读

相关 HTML+JS 省市二级联动

文章目录 1. 按 2. 源码 2.1. \`二级联动.html\` 2.2. \`二级联动.js\` 1. 按 1. 创

喜欢ヅ旅行/ 2022年12月15日 09:01/ 0 赞/ 284 阅读

相关 Mybatis + js 实现下拉列表二级联动

Mybatis + js 实现下拉列表二级联动学习内容：一、业务需求二、实现效果三、代

太过爱你忘了你带给我的痛/ 2022年10月06日 04:58/ 0 赞/ 260 阅读

相关二级联动

以省份和城市为例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

电玩女神/ 2022年07月27日 14:42/ 0 赞/ 237 阅读

相关 js下拉列表二级联动

学了JS也有一段时间了，今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动，就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有

刺骨的言语ヽ痛彻心扉/ 2022年06月01日 04:41/ 0 赞/ 441 阅读

相关 layui实现二级联动

使用layui的时候使用js的时候就要注意了很有可能这个时候js的很多事件都不好使了 ![70][] ![70 1][] ![70 2][]

灰太狼/ 2022年05月28日 04:22/ 0 赞/ 229 阅读

相关 JS实现二级联动 (createTextNode，createElement )

JS中只有数组，没有集合数组长度=角标+1 长度可变 cities\[0\],cities\[1\],cities\[2\],cities\[3\] citie

待我称王封你为后i/ 2022年05月15日 16:21/ 0 赞/ 197 阅读

相关原生js实现省市二级联动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页

拼搏现实的明天。/ 2022年04月06日 07:56/ 0 赞/ 358 阅读

相关二级联动

<select id="depositorytype" name="depositorytype" οnchange="ld();" class="zj-way">

刺骨的言语ヽ痛彻心扉/ 2022年04月02日 15:24/ 0 赞/ 258 阅读

相关使用js实现二级联动表

> 我们在做项目的时候，经常会遇到选择省市级、选择单位部门等功能，也就是我们熟悉的二级联动问题。 > 之前没有接触过二级联动，所以感觉二级联动会比较麻烦，实现起来很困难。但

朴灿烈づ我的快乐病毒、/ 2022年02月12日 14:45/ 0 赞/ 311 阅读