js实现省市级联的简单代码

﹏ヽ暗。殇╰゛Y 2022-05-27 08:08 209阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>省市级联</title>
    
    <script type="text/javascript">
    	var cityList=new Array();//构建城市列表,城市太多,这里只简单写几个
    	cityList["北京市"]=['海淀区','朝阳区','密云区'];
    	cityList["上海市"]=['徐汇区','黄埔区','虹口区'];
    	cityList["吉林省"]=['长春市','吉林市','四平市'];
    	
    	function allprovince(){
    		//获取省的select对象
    		var province=document.getElementById("province");
    		for (var i in cityList){
    			province.add(new Option(i,i),null);
    			}
    		}
    		
    		
    	//根据省份加载对应的城市
    	function loadCity(){
    		
    			//获取省份的值
    			var province=document.getElementById("province").value;
    			//获取城市的对象
    			var city=document.getElementById("city");
    			
    			//清空上一次选择省份显示的城市
    			city.options.length=0;
    			
    			for(var i in cityList){
    				//让其对应
    				if(i==province){
    					for(var j in cityList[i]){
    						city.add(new Option(cityList[i][j],cityList[i][j]),null);
    						}
    					}
    				}
    			}
    	window.οnlοad=allprovince;
    </script>
    
    </head>
    
    <body>
    省份选择:<select id="province" onChange="loadCity();">
    <option>--请选择省份--</option>
    </select>
    
    城市选择:<select id="city">
    <option>--请选择城市--</option>
    </select>
    
    
    
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 js+jq实现选择框联动，已省市级联为例，超详细

jq的js文件需要自行官网下载或在联网情况下采用第三方jq库废话不多说直接上代码，注释超详细 <!DOCTYPE html> <html lang="e

柔情只为你懂/ 2023年10月08日 12:34/ 0 赞/ 58 阅读

相关前端.省市级联框

[前端.省市级联框][.] var codeurl = ctx + "system/districts/list" //债务人省份

╰+哭是因爲堅強的太久メ/ 2023年08月17日 15:20/ 0 赞/ 123 阅读

相关 Vue实现省市区级联选择器，使用Elementui的Cascader级联选择器获取label值

前言：项目中的收货地址需要使用到省市区级联选择器，选择的UI框架是 Element 效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

太过爱你忘了你带给我的痛/ 2023年07月18日 14:16/ 0 赞/ 131 阅读

相关 JS解析XML--实现省市县级联

JS解析省市区级联XML文件代码附上： //1.开始读取xml文件 var xmlDoc = checkXMLDocObj('../js/font/p

àì夳堔傛蜴生んèń/ 2022年08月21日 04:57/ 0 赞/ 148 阅读

相关 js实现省份、城市的级联选择

JS实现省份、城市的级联选择实现省份、城市的级联选择，可以用纯JS实现，当然也可以使用jquery实现，下面就讲一下如何用纯javascript实现。其实实现JS

绝地灬酷狼/ 2022年08月14日 04:52/ 0 赞/ 329 阅读

相关 js级联

<script type="text/javascript"> //选择地址 var cityList=new Array(); ci

桃扇骨/ 2022年07月10日 23:45/ 0 赞/ 297 阅读

相关 js实现省市级联的简单代码

<!doctype html> <html> <head> <meta charset="utf-8"> <title>省市级联</ti

﹏ヽ暗。殇╰゛Y/ 2022年05月27日 08:08/ 0 赞/ 210 阅读

相关 jquery省市级联简单例子

ajax方式： $("\sf").change(function()\{ $("\shi").empty();//清空城市表 $("\shi").ap

Bertha 。/ 2022年05月17日 00:37/ 0 赞/ 190 阅读

相关 javascript使用select标签如何实现省市联动,级联下拉列表

select对象属性： options：获得所有的option对象,返回option的数组 selectIndex：获得当前选中项在option中的索引号方

Dear 丶/ 2022年05月16日 20:33/ 0 赞/ 474 阅读

相关 js实现级联下拉列表

效果图： ![20190301193935424.png][]![20190301194000250.png][] HTML: <select class="

忘是亡心i/ 2022年03月15日 09:35/ 0 赞/ 393 阅读