<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>三级联动例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="UTF-8" />
<meta http-equiv="expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta content="all" name="robots" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var assessmentTypes = [
{atcode: "10", typename: "广东"},
{atcode: "20", typename: "湖南"},
{atcode: "30", typename: "陕西"}
];
var assessmentContents = [
{atcode: "10", acCode: "1001", acName: "深圳"},
{atcode: "10", acCode: "1002", acName: "珠海"},
{atcode: "20", acCode: "2001", acName: "长沙"},
{atcode: "20", acCode: "2002", acName: "湘潭"},
{atcode: "20", acCode: "2003", acName: "邵阳"},
{atcode: "30", acCode: "3002", acName: "西安"},
{atcode: "30", acCode: "3003", acName: "商洛"}
];
var assessmentStandards = [
{atcode: "10", acCode: "1001", asCode: "100101", atContent: "福田区"},
{atcode: "10", acCode: "1001", asCode: "100102", atContent: "南山区"},
{atcode: "10", acCode: "1002", asCode: "100201", atContent: "香洲区"},
{atcode: "10", acCode: "1002", asCode: "100202", atContent: "拱北区"},
{atcode: "20", acCode: "2001", asCode: "200101", atContent: "芙蓉区"},
{atcode: "20", acCode: "2001", asCode: "200102", atContent: "岳麓区"},
{atcode: "20", acCode: "2002", asCode: "200201", atContent: "雨湖区"},
{atcode: "20", acCode: "2002", asCode: "200202", atContent: "湘江区"},
{atcode: "20", acCode: "2003", asCode: "200301", atContent: "双清区"},
{atcode: "20", acCode: "2003", asCode: "200302", atContent: "大祥区"},
{atcode: "30", acCode: "3002", asCode: "300201", atContent: "雁塔区"},
{atcode: "30", acCode: "3003", asCode: "300302", atContent: "商州区"}
];
function loadSelect(id, list, valueField, textField) {
var html = "<option value='-1'>------请选择---</option>";
if(list!=null && list.length>0) {
for(var i=0, len=list.length; i<len; i++) {
html += "<option value='" + list[i][valueField] + "'>" + list[i][textField] + "</option>";
}
}
$(id).innerHTML=html;
}
function onload() {
loadSelect("category1", assessmentTypes, "atcode", "typename");
loadSelect("category2");
loadSelect("category3");
}
function filterList(dataList, valueField, value) {
var list = [];
if(dataList!=null && dataList.length>0) {
for(var i=0, len=dataList.length; i<len; i++) {
if(dataList[i][valueField]==value) {
list[list.length] = dataList[i];
}
}
}
return list;
}
function onCategory1Change(object) {
$("address").value = object.options[object.selectedIndex].text;
var list = filterList(assessmentContents, "atcode", object.value);
loadSelect("category2", list, "acCode", "acName");
}
function onCategory2Change(object) {
$("address").value = $("category1").options[$("category1").selectedIndex].text + object.options[object.selectedIndex].text;
var list = filterList(assessmentStandards, "acCode", object.value);
loadSelect("category3", list, "asCode", "atContent");
}
function onCategory3Change(object) {
$("address").value = $("category1").options[$("category1").selectedIndex].text + $("category2").options[$("category2").selectedIndex].text + object.options[object.selectedIndex].text;
//$("address").value = $("category1").options[$("category1").selectedIndex].text + $("category2").options[$("category2").selectedIndex].text + $("category3").options[$("category3").selectedIndex].text;
}
function $(id) {
return document.getElementById(id);
}
window.onload = onload;
//-->
</SCRIPT>
</head>
<body onload = "onload()">
地址:
<select id="category1" οnchange="onCategory1Change(this)"></select>
<select id="category2" οnchange="onCategory2Change(this)"></select>
<select id="category3" οnchange="onCategory3Change(this)"></select>
<input id="address" type="text"></input>
</body>
</html>
运行结果: