JavaScript 实现简单二级联动

 <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").onchange=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=="吉林省"){
					cityArr = ["长春市","吉林市","四平市","松原市","通化市"];

				}else if(provinceValue=="辽宁省"){
				//3 为辽宁省定制城市列表
				cityArr = ["沈阳市","大连市","铁岭市","抚顺市","丹东市"];
			 }else if(provinceValue=="山东省"){
				//3 为山东省定制城市列表
				cityArr = ["青岛市","济南市","烟台市","潍坊市","威海市"];
			  }
			for(var i=0;i<cityArr.length;i++){
				var option=document.createElement("option");
				option.setAttribute("value",cityArr[i]);
				var text = document.createTextNode(cityArr[i]);
				option.appendChild(text);
				city.appendChild(option);
			}
		 }
     </script>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-12-07 20:59:46

JavaScript 实现简单二级联动的相关文章

JavaScript实现省市二级联动

    JavaScript实现省市二级联动 展示一下效果? 当我鼠标点击前面的省那一栏的时候后面市那一栏会出现相对应的下辖市 实现思路 1. 添加相对应的select容器 2. 然后添加数据 3. 将相应的数据赋值给对应的option控件 方法的讲解 Function()函数 onchange();改变事件 笔者在这里写了一个关于河南与河北的简单联动   省市联动 <body> <select id="province"></select>省 &l

JavaScript实现Div二级联动效果(响应键盘按钮)

最近在学习javascript,给了一个题目给我,写一个二级联动效果.当做练习. 写一个二级联动的HTML页面,具体要求如下: 1.页面支持通过键盘上的上下左右键实现焦点的移动 2.页面左侧为父栏目名称,如电影.电视剧.体育.音乐.少儿.综艺.咨询等 3.焦点在对应父栏目上时,展示子栏目信息,如电影栏目下有1,2,3,4,5等子栏目: 4.页面数据为静态数据,可以配置修改: 效果: <html> <head> <title>二级联动</title> <

使用Javascript来实现二级联动菜单的效果

效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=["请选择省份/城市","北京市","上海市","天津市","河南省","山东省","河北省"]; var arr_city=[ ["请选择城市/地区"], [&

利用JS实现一个简单的二级联动菜单

前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS实现二级联动菜单</title> 6 </head> 7 <body> 8 <form name="form1"

Javascript实现简单的下拉二级菜单

在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/ <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

JavaScript省市二级联动

cities.xml <?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通

JavaScript案例六:简单省市联动(NBA版)

JavaScript实现简单省市(NBA版)联动 <!DOCTYPE html> <html> <head> <title>JavaScript实现简单省市(NBA版)联动</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascrip

javascript二级联动

二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市:点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴. 要想实现这个步骤,就要用到javascript来实现.其中原理用到onchange时间. 首先,onchange 事件会在域的内容改变时发生.支持该事件的 JavaScript 对象:fileUpload, select, text, textarea,我们在实现二级联动中正是用到select来完成. 以下是HTML代码,先设置一个select为省,第二个

简单得二级联动

<!--/*--><!--* Created by sincere丶胡(weibo) on 2017/6/28.--><!--*/--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>yadi</title> <meta name="viewport&quo