JavaScript 实现简单二级联动

最新推荐文章于 2023-05-27 21:26:14 发布
VIP文章 最新推荐文章于 2023-05-27 21:26:14 发布
阅读量504 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/treeling_/article/details/46973125
版权 
 <body>
     省份：
	 <select id="province">
	 	<option value="">请选择</option>
		<option value="吉林省">吉林省</option>
		<option value="辽宁省">辽宁省</option>
		<option value="山东省">山东省</option>
    </select>
	城市:
	<select id="city">
    	<option value="">请选择</option>
    </select>
	 </select>
  </body>
     <script type="text/javascript">
     	 document.getElementById("province").οnchange=function(){
		 	    var city= document.getElementById("city");
				var options=city.getElementsByTagName("option");
				var len=options.length;
				for(var z=1;z<len;z++){
					city.removeChild(options[1]);
				}
				
				var provinceValue = this.value;
				var cityArr;
		     if(provinceValue=="吉林省
最低0.47元/天 解锁文章
treeling_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript实现简单的二级联动
10-24
主要介绍了javascript实现简单的二级联动,非常的实用，需要的朋友可以参考下
【前端】JavaScript实现二级联动(省市、楼栋)
m0_64210833的博客
12-04 1906
二级联动在实际需求中使用的非常多，比如省市，楼栋等，所以我们应当也应该掌握这些前端知识。
使用javascript实现二级联动菜单
热门推荐
u011526599的专栏
05-07 1万+
关于使用javascript实现二级联动菜单的探讨
JavaScript实现二级联动下拉菜单
MistyWood的博客
09-19 9686
最近学习前端js，做了一个二级联动下拉菜单。二级下拉菜单的内容随着一级下拉菜单选项的更改而更改。菜单的内容是手动存在js的数组里的，随便写了几个数据。 效果图： 实现源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> ...
Javascript实现二级select联动
weixin_30393907的博客
10-17 97
1.js cities = new Object(); cities['河北省']=new Array('石家庄', '张家口市', '承德市', '秦皇岛市', '唐山市', '廊坊市', '保定市', '沧州市', '衡水市', '邢台市', '邯郸市'); cities['山西省']=new Array('太原市', '大同市', '朔州市', '阳泉市', '长治市', '晋城市...
利用JavaScript来实现省份—市县的二级联动
weixin_34332905的博客
10-25 253
所谓省—市二级联动是指当选择省份下拉选择框时，市县的下拉框会根据选择的省市而有相应的市县加载出来，如下图所示选择“上海市”，城市的下拉选择框只会出现上海的市县： 这种二级联动非常常见，我也是在学习的过程中记录下来，现在我来说一下怎么实现： 1.首先需要有省份和市县的信息，可以从数据库里加载也可以把放在一个独立的JavaScript文件里的数组...
基于Javascript实现二级联动菜单效果
10-22
主要介绍了基于Javascript实现二级联动菜单效果的相关资料,需要的朋友可以参考下
JavaScript案例-js二级联动菜单
02-16
JavaScript案例-js二级联动菜单
基于javascript实现全国省市二级联动下拉选择菜单
10-22
主要介绍了基于javascript实现全国省市二级联动下拉选择菜单,以一个完整实例形式较为详细的分析了js实现省市二级联动下拉菜单的实现技巧,非常简单实用,需要的朋友可以参考下
二级联动菜单(javascript)
weixin_30510153的博客
07-11 401
<scriptlanguage="JavaScript"><!--varg_selProvince;varg_selCity;varProvinces=newArray(newArray("110000","北京市"),newArray("120000","天津市"),newArray("130000","河北省"),newArray("140000","山西省...
javascript实现二级联动下拉框
10-02
javascript实现二级联动下拉框，多多支持：）
javascript 二级联动菜单(菜鸟版)
08-29
javascript 二级联动菜单
javascript实现二级的省份城市联动
09-17
javascript实现二级的省份城市联动。 var aprovince = [ ["--请选择省份--"], ["北京"], ["上海"], ["广东"], ["湖南"] ]; var acity = [ ["--请选择城市--"], ["东城区","西城区","南城区","北城区"], ["杨浦区","浦东区","宝山区","闸北区"], ["东莞","深圳","广州","惠州"], ["长沙","株洲","湘潭","岳阳"] ];
JavaScript实现二级联动下拉框
dlf...fxm
09-07 420
网上经常存在地址联动的案例，今天发现这个用js写的还蛮简单的，记录下html代码段 <select id="province" onchange="changeCity(this.value)"> <option value="0">----请选择省份----</option> <option value="1">山西省</option> <option value="2">
JavaScript实现二级下拉菜单联动
weixin_39006917的博客
05-15 2126
实现效果 选择相应的省份，二级菜单默认显示省会城市，同时可以选择其他城市。 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /** * 实现二级菜单级联 */ var prov
JavaScript实现省市二级联动
weixin_33889665的博客
01-31 126
JavaScript实现省市二级联动 展示一下效果？ 当我鼠标点击前面的省那一栏的时候后面市那一栏会出现相对应的下辖市 实现思路 1.添加相对应的select容器 2.然后添加数据 3.将相应的数据赋值给对应的option控件 方法的讲解 Function（）函数 onchange();改变事件 笔者在这里写了一个关于河南与河北...
聊聊如何使用Js写一个简单的二级联动和三级联动呢？
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-27 1634
js的二级联动和三级联动，有很多种写法，我这种写法只是多种写法中的一种，我个人认为是比较简洁的一种；上面的这些代码多练习几遍也就会写了，也不用死记硬背，理解就好了！实在怕忘记就一键三连吧！哈哈！
js实现二级联动（包括js、vue、react+ts、vue3+ts的写法）
朱远辉的博客
05-08 1026
js实现二级联动（包括js、vue、react+ts、vue3+ts的写法）
JavaScript——二级联动
weixin_67658096的博客
09-28 475
【代码】JavaScript——二级联动。
javascript利用selected属性实现市区二级联动
最新发布
07-24
### 回答1： 在JavaScript中，利用selected属性可以实现市区二级联动的效果。首先，需要在HTML中定义两个下拉列表，一个用于显示市，另一个用于显示区。然后，通过JavaScript获取这两个下拉列表的元素。 接下来，在代码中定义一个存储市和区的对象。对象的每个属性代表一个市，属性的值为一个数组，数组中的每个元素代表该市的一个区。例如： var data = { "上海市": ["黄浦区", "徐汇区", "静安区"], "北京市": ["东城区", "西城区", "朝阳区"], // 其他省市和区... }; 然后，定义一个函数，用于根据所选的市动态生成对应的区。函数首先清空已有的区列表，然后根据所选的市获取对应的区数组。遍历区数组，动态创建option元素，并根据需要设置selected属性，最后将option元素添加到区下拉列表中。例如： function generateDistricts(){ var citySelect = document.getElementById("city"); var districtSelect = document.getElementById("district"); var selectedCity = citySelect.value; var districts = data[selectedCity]; // 清空已有的区列表 districtSelect.innerHTML = ""; // 动态生成区下拉列表 for(var i = 0; i < districts.length; i++){ var option = document.createElement("option"); option.text = districts[i]; // 根据需要设置selected属性 if(i === 0){ option.selected = true; } districtSelect.add(option); } } 最后，将上述函数与市下拉列表的change事件关联起来，这样当选择不同的市时，区下拉列表会动态变化。例如： var citySelect = document.getElementById("city"); citySelect.addEventListener("change", generateDistricts); 通过上述方法，利用JavaScript的selected属性可以实现市区二级联动的效果。 ### 回答2： Javascript利用selected属性实现市区二级联动的实现方法如下： 1. 首先，在HTML中创建两个<select>元素，一个用于选择市区，一个用于选择区域，分别设置相应的id属性。 2. 在Javascript中，使用document.getElementById()方法获取到市区<select>元素和区域<select>元素的引用。 3. 给市区<select>元素添加change事件监听器，当市区选择发生变化时触发该事件。 4. 在事件处理函数中，首先使用selected属性获取到当前选中的市区的选项值。 5. 根据选中的市区的值，动态生成相应的区域选项。 6. 遍历区域选项，为每个选项创建新的<option>元素，并将其添加到区域<select>元素中。 下面是具体实现的代码示例： HTML代码： ```html <select id="citySelect"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select> <select id="areaSelect"> </select> ``` Javascript代码： ```javascript // 获取市区选择元素和区域选择元素的引用 var citySelect = document.getElementById("citySelect"); var areaSelect = document.getElementById("areaSelect"); // 添加市区选择变化事件监听器 citySelect.addEventListener("change", function() { // 获取当前选中的市区选项值 var selectedCity = citySelect.value; // 根据市区选项值生成区域选项 switch(selectedCity) { case "beijing": areaSelect.innerHTML = "<option value='dongcheng'>东城</option><option value='xicheng'>西城</option>"; break; case "shanghai": areaSelect.innerHTML = "<option value='huangpu'>黄浦</option><option value='xuhui'>徐汇</option>"; break; case "guangzhou": areaSelect.innerHTML = "<option value='yuexiu'>越秀</option><option value='tianhe'>天河</option>"; break; default: areaSelect.innerHTML = ""; } }); ``` 以上代码实现了一个简单的市区二级联动效果，当选择不同的市区时，会动态生成对应的区域选项。具体的区域选项可以根据实际需求进行修改和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值