js级联控制省市区下拉菜单——数据读取

http://blog.csdn.net/qq_33323054/article/details/79580121

之前介绍了如何用js级联控制省市区下拉菜单，在上一篇博文末尾，博主提到了一个promptinfo()函数；这个函数将下拉菜单中的省市区放在了一个字符串中并以"|"符号隔开，然后存放在了数据库中。

博主在做的一个项目中，需要实现一个功能：在文本框中输入身份证号，光标离开该文本框后，三个下拉菜单中要能够显示用户对应的户籍地址。下面开始介绍具体的实现方案：

首先，在网页中绘制一个文本框：

<input type="text" id="textbox" onchange="return showData()">

其中，光标输入完毕后离开该文本框就会触发onchange的事件"return showData()";

接下来就要在它的callback事件中添加代码来将省市区分离并注意放入三个下拉菜单中。有几个需要注意的地方：

1.从数据库中读取出来的数据Residence是由"|"分割的字符串；使用如下操作可将其分离开来；分离之后的address就成了一个数组，且省、市、区分别存放在了该数组的前三个位置中。

var address = Residence.split("|");

2.将数据库中获取到的值不能直接赋值给下拉菜单，即document.getElementById('s1').value=address[0];这种操作在这里不可取。因为这只是一个普通的赋值操作，并不是选择下拉框选项的操作，两者虽然在执行结果上看起来差不多，在其他程序中也许可行，但是在这里却会影响后面的下拉框中元素的选择。因为只有当前一个下拉框中有选项被选择之后，后面下拉框中才会根据情况自动添加元素options。而使用如上的赋值语句的话，无法触发后面的下拉框自动添加元素的事件，如此就会导致后两个下拉框中的内容无法实现自动添加。因此，在这里，应该先求出下拉框中与address[0]内容相同的项的索引index，再根据索引进行赋值：document.getElementById(s[0]).selectedIndex = index + 1;

完整代码如下：

var address = Residence.split("|");
			var index;//第一个下拉框的索引
			var provinces = new Array("北京市", "天津市", "上海市", "重庆市", "河北省", "山西省",
					"内蒙古", "辽宁省", "吉林省", "黑龙江省", "江苏省", "浙江省", "安徽省", "福建省",
					"江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西", "海南省",
					"四川省", "贵州省", "云南省", "西藏", "陕西省", "甘肃省", "青海省", "宁夏", "新疆",
					"香港", "澳门", "台湾省");
			var cnt = provinces.length;
			for (i = 0; i < cnt; i++) {//求出索引
				if (address[0] == provinces[i]) {//找到与address[0]相同的选项，再将i的值赋给index
					index = i;
					break;
				}
			}
			if (index < provinces.length) {
				document.getElementById(s[0]).selectedIndex = index + 1;//根据索引赋值
				var str = "0";
				for (i = 0; i < 1; i++) {
					str += ("_" + (document.getElementById(s[i]).selectedIndex - 1));
				}
				var ss = document.getElementById(s[1]);
				with (ss) {
					length = 0;
					options[0] = new Option(opt0[1], opt0[1]);
					if (dsy.Exists(str)) {
						ar = dsy.Items[str];
						for (i = 0; i < ar.length; i++)
							options[length] = new Option(ar[i], ar[i]);
						options[0].selected = true;
					}
					change(2);
				}
				var index1;//第二个下拉框的索引
				var city = ar;
				var cnt1 = city.length;
				for (i = 0; i < cnt1; i++) {
					if (address[1] == city[i]) {
						index1 = i;
						break;
					}
				}
				if (index1 < city.length) {
					document.getElementById(s[1]).selectedIndex = index1 + 1;
					var str = "0";
					for (i = 0; i < 2; i++) {
						str += ("_" + (document.getElementById(s[i]).selectedIndex - 1));
					}

					var ss = document.getElementById(s[2]);
					with (ss) {
						length = 0;
						options[0] = new Option(opt0[2], opt0[2]);
						if (dsy.Exists(str)) {
							ar = dsy.Items[str];
							for (i = 0; i < ar.length; i++)
								options[length] = new Option(ar[i], ar[i]);
							options[0].selected = true;
						}
					}
					var index2;//第三个下拉框的索引
					var town=ar;
					var cnt2=town.length;
					for (i = 0; i < cnt2; i++) {
						if (address[2] == town[i]) {
							index2 = i;
							break;
						}
					}
					if(index2<town.length){
						document.getElementById(s[2]).selectedIndex=index2+1;
					}
				}
			}

这样就实现了对三个下拉菜单分别按索引进行赋值的功能。但是本文中只介绍了关于下拉菜单部分的功能，数据的存取以及后端的java代码需要读者自行完成。

js级联控制省市区下拉菜单——数据读取

猜你喜欢