<TITLE>三级联动</TITLE> <STYLE> body { font-size: 11px; font-family: Verdana;background:#ececec;color:#666666;} select { font-size: 11px; font-family: Verdana;vertical-align: middle;margin: 3px;background:#ececec;color:#666666;} </STYLE> <div id="tar"> </div> <script>var createDate = "2003.8.19";</script> <SCRIPT LANGUAGE="JavaScript" DEFER> var fMenu = ["上海","北京","广东","南京"] var fValue = ["shanghai","beijing","guadong","nanjing"] var sMenu = [["杨浦区","徐汇区","黄浦区","卢湾区"],["丰台区","宝定区"],["广州","深圳"],["雨花台","郊区别墅"]] var sValue = [["yp","xh","hp","lw"],["ft","bd"],["gz","sz"],["yht"]] var tMenu = [[["市光新村","工农三村"],["徐汇新村","徐汇高楼"],["黄浦楼宇","外滩风景"],["卢湾菜场","卢湾体育馆"]],[["亚运村","无名村"],["宝定村"]],[["广州市区","广州郊区"],["深圳市区","福田"]],[["南京市区","南京郊区"],["别墅1","别墅2"]]]
var oWhere = document.all.tar; var ofMenu = document.createElement("<Select name='city'>"); var osMenu = document.createElement("<Select name='region'>"); var otMenu = document.createElement("<Select name='village'>"); with(oWhere)appendChild(ofMenu),appendChild(osMenu),appendChild(otMenu);
createMainOptions(); createSubOptions(0); createSub2Options(0,0);
ofMenu.onchange = function() {createSubOptions(this.selectedIndex);createSub2Options(this.selectedIndex,osMenu.selectedIndex);}; osMenu.onchange = function() {createSub2Options(ofMenu.selectedIndex,this.selectedIndex);};
function createMainOptions() { for(var i=0;i<fMenu.length;i++)ofMenu.options[i] = new Option(fMenu[i],fValue[i]); } function createSubOptions(j) { with(osMenu) { length=0; for(var i=0;i<sMenu[j].length;i++)osMenu.options[i] = new Option(sMenu[j][i],sValue[j][i]); } } function createSub2Options(j,k) { with(otMenu) { length=0; for(var i=0;i<tMenu[j][k].length;i++)otMenu.options[i] = new Option(tMenu[j][k][i]); } } </SCRIPT> |