js之简易二级联动

简易二级联动结构分析（奶奶级）

这个小demo主要由三大块组成：html、css 和 js

首先是html模块：
form 标签用于为用户输入创建 HTML 表单，是块级元素。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
首先创建一个form表单，包含两个select，用于进行二级联动。

第一个select中包含有一个onchange事件，那我们就先来了解一下什么是onchange 事件，onchange 事件怎么用：

onchange 事件会在域的内容改变时发生。
语法：οnchange=“SomeJavaScriptCode”，参数SomeJavaScriptCode规定该事件发生时执行的 JavaScript。
onchange 属性可以使用于： input，select 和 textarea。

onchange中包含有一个change()方法，这个在后面的js中有定义，接下来看看selectedIndex 属性，selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

理一理，大致意思就是，在选中第一个selsct选项时，会触发一个关于当前选项索引的一个change(）方法。

<form action="">
	<select name="" id="chose1" onchange="change(this.selectedIndex)"></select>
	<select name="" id="chose2"></select>
</form>

接下来就是css样式模块

css样式：

<style type="text/css">
*{margin: 0;padding: 0;}
	form{width: 300px;height: 300px;margin: 10px auto;}
	form select{width: 140px;height: 50px;text-align: center;line-height: 30px;font-size: 20px;}
</style>

重中之重，JavaScript模块！！我来分块解释：

JavaScript模块：

第一块没什么好解释的，定义了两个数组，一级数组和二级数组，一级数组中的第一个元素对应二级数组中的第一个数组，选择数组 x 中的一个元素，默认显示数组 y 中所包含的数组的第一个元素。如果用 i 来表示，则为 x[ i ] 对应了 y [ i ] [ 0 ]，那么如此一波分析，我们的大致思路也就出来了

var x = ["请选择...","美食","景点","电影"];
var y = [
["请选择..."],
["黄焖鸡","油焖大虾","红烧肉","东坡肉"],
["黄山","泰山","嵩山","华山"],
["烈日灼心","逆战","无间道","黑金"]
];	

接下来就是主方法：
二话不说先用document.getElementById进行关联，方便我们以后直接进行调用。
第一个select框选项卡的长度等于数组x的长度（[“请选择…”,“美食”,“景点”,“电影”]），使第二个select框选项卡的长度等于数组y中对应的数组的长度 index=0，即为下标为0的数组的长度，为1（[“请选择…”]）
第一个for()循环：将数组 x 中的元素的值赋给相对应的chose1的选项卡，第二个for()循环：index=0，说白了就是使select显示[“请选择…”]

window.onload=init;
function init(){
	var index=0;
	// 进行关联
	var chose1=document.getElementById("chose1");
	var chose2=document.getElementById("chose2");
	// 使第一个select框选项卡的长度等于数组x的长度
	chose1.length=x.length;
	// 使第二个select框选项卡的长度等于数组y中对应的数组的长度 index=0
	chose2.length=y[index].length;
	// 使第一个select框选项卡的文本内容等于数组x中对应下标的元素的值
	for(var i=0;i<x.length;i++){
		chose1.options[i].text=x[i];
	}
	// 使第二个select框选项卡的文本内容等于数组y中对应的数组的对应下标的元素的值  index=0
	for(var j=0;j<y[index].length;j++){
		chose2.options[j].text=y[index][j];
	}
}

接下来就是第一个 select 中的 change() 事件：
还是进行关联，select 的长度等于数组 y 中下标为 obj 的数组的长度，即准备将两个 select 进行关联，for()循环将数组 y 中对应数组的对应元素的值赋给相对应的chose2的选项卡

function change(obj){
	var chose2=document.getElementById("chose2");
	chose2.length=y[obj].length;
	// 使第二个select框选项卡的文本内容根据输入参数obj的改变而改变,从而实现联动
	for(var i=0;i<y[obj].length;i++){
		chose2.options[i].text=y[obj][i];
	}
}

说起来有点绕，理解不来可以代值想想
把数组搬过来：

var x = ["请选择...","美食","景点","电影"];
var y = [
["请选择..."],
["黄焖鸡","油焖大虾","红烧肉","东坡肉"],
["黄山","泰山","嵩山","华山"],
["烈日灼心","逆战","无间道","黑金"]
];	

如果数组 x 的下标是1，即选择了“美食”，那么obj=1，chose2 的长度就是y[1]的长度，为4，然后利用一波for()循环，成功的将 y[1]的值写进了chose2的选项卡中。

上面就是简易的二级联动的分析，小结一下：
基本思路和流程就是，先写html框架，想清楚每个标签或者模块都要做什么，再写css样式，最后写js 。简要谈谈 js 的流程，个人喜欢先关联起来，关联起来啥话都好说，直接拿来用，就不会用一个关联一个那么乱并且麻烦了，第二步想好select 的内容长度，再将对应的数组中值赋进去，第三步就是写关联的方法，根据第一个select选择数组的下标，来确定需要二级数组中的哪个小数组，并且将值一 一对应起来。

简易二级联动就大功告成了！