省、市、县三个下拉列表,当一个发生变化时,相关的也发生变化。
实现方法
1.用一个二维数组对象,显示所有省、市、县的数据
结构如:arr[0] = new Array('浙江省', 1, 0);
第二维的第一个元素表示名称
第二维的第二个元素表示编号
第二维的第三个元素表示父编号
如浙江省的“编号”是 1,那么杭州市的“父的编号”必是 1
如下:
arr[0] = new Array('浙江省', 1, 0);
arr[1] = new Array('杭州市', 2, 1);
arr[2] = new Array('西湖区', 3, 2);
2.当省、市的下拉列表发生时,执行一个函数,这个函数改其下级显示的内容
其它显示的内容,从二维数组对象中筛选,主要根父编号的关系来筛选
代码如下:
<select id="Province" onchange="SwitchProvince();">
<option value="0">请选择</option>
<option value="1">浙江省</option>
<option value="13">江苏省</option>
</select>
<select id="City" onchange="SwitchCity();">
<option value="0">请选择</option>
</select>
<select id="County">
<option value="0">请选择</option>
</select>
<script language="JavaScript">
var arr = new Array();
arr[0] = new Array('浙江省', 1, 0); // 名称、编号、父编号
arr[1] = new Array('杭州市', 2, 1);
arr[2] = new Array('上城区', 3, 2);
arr[3] = new Array('下城区', 4, 2);
arr[4] = new Array('西湖区', 5, 2);
arr[5] = new Array('余杭区', 6, 2);
arr[6] = new Array('上城区', 7, 2);
arr[7] = new Array('温州市', 8, 1);
arr[8] = new Array('瑞安市', 9, 8);
arr[9] = new Array('乐清市', 10, 8);
arr[10] = new Array('永嘉县', 11, 8);
arr[11] = new Array('平阳县', 12, 8);
arr[12] = new Array('江苏省', 13, 0);
arr[13] = new Array('南京市', 14, 13);
arr[14] = new Array('玄武区', 15, 14);
arr[15] = new Array('秦淮区', 16, 14);
arr[16] = new Array('白下区', 17, 14);
arr[17] = new Array('浦口区', 18, 14);
arr[18] = new Array('无锡市', 19, 13);
arr[19] = new Array('南长区', 20, 19);
arr[20] = new Array('崇安区', 21, 19);
arr[21] = new Array('北塘区', 22, 19);
arr[22] = new Array('锡山区', 23, 19);
var oProvince = document.getElementById('Province');
var oCity = document.getElementById('City');
var oCounty = document.getElementById('County');
// 切换省时执行,改变城市的下拉列表
function SwitchProvince()
{
var value = oProvince.value;
oCity.options.length = 0; // 清理城市下拉列表
oCity.options[0] = new Option('请选择', '');
oCounty.options.length = 0; // 清理县市下拉列表
oCounty.options[0] = new Option('请选择', '');
if (value < 1) return;
for (var i = 0; i < arr.length; i++)
{
if (arr[i][2] == value) // 子对象
{
oCity.options[oCity.length] = new Option(arr[i][0], arr[i][1]);
}
}
}
// 切换城市时执行,改变县市的下拉列表
function SwitchCity()
{
var value = oCity.value;
oCounty.options.length = 0; // 清理县市下拉列表
oCounty.options[0] = new Option('请选择', '0');
if (value < 1) return;
for (var i = 0; i < arr.length; i++)
{
if (arr[i][2] == value) // 子对象
{
oCounty.options[oCounty.length] = new Option(arr[i][0], arr[i][1]);
}
}
}
</script>



