地區:<select id="drpProvince"></select> - <select id="drpCity"></select> - <select id="drpArea"></select>
<script type="text/javascript">
//聯動select數組
var arrSelect = new Array(document.getElementById("drpProvince"), document.getElementById("drpCity"), document.getElementById("drpArea"));
//多圍數組數據,四圍分別保存id、父級id、顯示文本、文本值
var arrData = new Array(
<!--[999999,0,'--請選擇--',''],[999998,999999,'--請選擇--',''],[999997,999998,'--請選擇--',''],-->
[1,0,'北京','1'],[2,1,'北京','2']
,[3,0,'湖南','3'],[4,3,'長沙','4'],[5,3,'株洲','5'],[6,3,'湘潭','6'],[7,6,'嶽塘區','7'],[8,6,'雨湖區','8'],[9,6,'河塘區','9']
,[10,0,'廣東','10'],[11,10,'廣州','11'],[12,10,'佛山','12'],[13,11,'天河區','13'],[14,11,'番禺區','14'],[15,11,'越秀區','15'],[16,12,'南山區','16'],[17,12,'蟬城區','17']
);
//默認值數組
var arrDefault = new Array('10' ,'11' ,'13');
//初始化主函數
function arrInit(strInitID, arrSelect, arrMatrix, arrDefValue) {
function doChange(iIndex) {
var iCount = 0;
var sParentID = strInitID;
if (iIndex > 0) sParentID = arrSelect[iIndex - 1].options[arrSelect[iIndex - 1].selectedIndex].ID;
with (arrSelect[iIndex]) {
length = 0;
options[iCount++] = new Option('--所有--', '0', false, true);
for (var i = 0; i < arrMatrix.length; i++) {
if (String(arrMatrix[i][1]) == String(sParentID)) {
var oNewOption = new Option(arrMatrix[i][2], arrMatrix[i][3], false, false);
oNewOption.ID = arrMatrix[i][0];
options[iCount++] = oNewOption;
if(arrMatrix[i][3] == arrDefValue[iIndex])options[iCount - 1].selected = true;
};
};
/* if (iCount == 0) { //列表數爲0則新增默認項
var oNull = new Option("--", null, false, true);
oNull.ID = "_0x" + (new Date()).getTime();
options[0] = oNull;
};*/
//聯動改變所有子select
if (++iIndex < arrSelect.length) doChange(iIndex);
};
};
if (!arrDefValue) arrDefValue = [];
for (var i = 0; i < arrSelect.length - 1; i++) {
eval("arrSelect[" + i + "].onchange = function(){ doChange(" + (i + 1) + "); };");
}
doChange(0);
//只有第一次調用初始化主函數arrInit才使用默認值,之後手動選擇不受默認值限制,因此清空。
arrDefValue = [];
};
arrInit(0,arrSelect,arrData,arrDefault);
</script>