html表格联动,Table表格的二级联动

用Table实现二级联动

头一次听说二级联动这个概念，悔恨以前做课设的时候对这些东西浅浅略过。

网上搜寻一番后发现大多数例子都是对下拉选框的二级联动，最常用的应该就是省市区的选择了吧。

【复现select下拉选框的二级联动】

两个下拉选框，一个定义市一个定义区；区随市的变化而变化。

为市对应的下拉列表定义触发事件onchange(),当其中内容发生变化时触发函数。

-请选择-

-请选择-

下面是js脚本：

定义了一个二维数组，注意js中的二维数组下表允许使用字符串。(有点意思哦)

initProvince()：初始化函数。循环获取array中的元素，对 “市” 对应的下拉列表进行初始化。创建option时两个i是value和选项内容。

changeCity()：当 “市” 对应的下拉列表内容变化时，也就是对 “市” 进行了重新选择时，此函数被触发。

获取重新选择后的市的值(市名)，并且清空区对应的下拉列表。

遍历二维数组中 “市” 对应的数组，获取“市”对应的各个区，对区对应的下拉列表进行重建。

var array = new Array(); //数组

//js中的二维数组的下标可以使字符串

array['南京'] = ["江宁区", "鼓楼区", "雨花台区"];

array['常州'] = ["新北区", "武进区", "天宁区"];

array['西安'] = ["未央区", "莲湖区", "长安区"];

//java:array[0] = {"",""};

function initProvince() {

for(var i in array) {

var provinceObj = document.getElementById("province");

//创建一个选项

/**

* 参数一是：展示数据

* 参数二是：value属性的值

*/

var option = new Option(i, i); //jquery

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

}

}

function changeCity() {

var provinceName = document.getElementById("province").value;</