JS+HTML简单实现表单二级联动效果

表单选择栏二级联动

前言:表单的二级联动不可谓不重要,根据第一个选择栏的内容更改下一个选择栏的整体内容在一些场景下是必要的,所以今天以省市为例子利用JS+HTML实现简单的二级联动效果,仅做参考。

 

首先我们思考一下二级表单的产生都需要什么条件

• 以前一个选择栏的内容作为展现下一个选择栏的内容的标识,首先第一个选择栏的内容是一部分数据,下一个选择栏的内容是另一部分数据,并且第一部分数据应该是唯一的一个,第二部分的数据可以是多个,两者之间是一对多的关系,这就需要能够实现这种数据存储的数据结构,二维数组正好可以实现
• JS中的二维数组可以将字符串作为角标,正好满足需求
• 装载数据的二维数组被两个选择栏所共享
• 当第一个选择栏的内容变化时,需要第二个选择栏的内容跟随改变,这就需要触发onchang()方法,编写方法进行内容的更改,这是二级联动的关键

以上便是实现二级联动的条件

现在着手实现二级联动效果

 

1.准备数据,编写HTML代码作为数据显示的位置

这个步骤需要在JS中创建二维数组,并且将HTML页面中的标签编写完整,因为数组中的内容不固定,因此在JS中动态创建select标签中的option,并未select标签设置内容变化触发方法onchange()

并且由于设定了onload()方法,所以在页面加载时,会加载onload()中的方法,initProvince()方法主要是初始化第一个省级选择栏

代码如下

	
	
		-请选择-
	
		
	
		-请选择-
	
		

//JS中的部分
//初始化数据
var array  = new Array();//数组
//js中的二维数组的下标可以使字符串
array['北京'] = ["朝阳区","昌平区","海淀区"];
array['山东'] = ["青岛","烟台","泰安"];
array['河南'] = ["郑州","洛阳","开封"];

2.编写JS中初始化页面中省级标签栏的方法

initProvince()方法主要是初始化省级标签栏的作用,因为第一个省级选择栏的信息是固定的,直接呈现即可.该方法采用JS动态代码创建option标签

代码如下:

function initProvince() {
    for(var i in array) {
	var provinceObj = document.getElementById("province");
	//创建一个选项
	/**
	  * 参数一是：展示数据
          * 参数二是：value属性的值
	  */
	var option = new Option(i, i); 

	provinceObj.add(option); //把创建的option添加到下拉列表中

    }
}

3.编写第二个选择栏当第一个选择栏内容改变时调用的方法onChangeCity()

实现思路:

在第一个选择栏的内容改变后执行onChangeCity()方法时,首先获取第一个选择栏此时的内容,然后根据内容循环遍历保存的数据数组,找到对应内容,创建第二个标签的option选项,显示内容,当然,在显示之前还需要将上一个产生的内容清空,否则第二个选择器的内容会在之前的内容基础上继续添加内容

代码如下:

function changeCity() {
	var provinceName = document.getElementById("province").value; 
        //得到第一个下拉列表的值
	var city = document.getElementById("city");
	//清空第二个下拉列表
	//方法一
	//city.innerHTML = "";
	//方法二
	city.options.length = 1;
	for(var p in array) {
	if(p == provinceName) {
	    //遍历每个省份的城市
	    for(var c in array[p]) {
		//创建一个option
		var option = new Option(array[p][c], array[p][c]);
		var city = document.getElementById("city");

		ity.add(option);
	    }
	}
    }

}

至此,二级联动效果就简单的实现了,效果图就不贴了,可以自行实践.

下面完整代码:

    
    

    




	
	
		-请选择-
	

	
		-请选择-