google huo baidu
javascript 二级联动菜单

解决方案 »

  1.   

    <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 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 oWhere = document.all.tar;
    var ofMenu = document.createElement("<SELECT name='main'>");
    var osMenu = document.createElement("<SELECT name='sub'>");
    with(oWhere)appendChild(ofMenu),appendChild(osMenu);createMainOptions();
    createSubOptions(0);ofMenu.onchange = function() {createSubOptions(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]);
        }
    }
    </SCRIPT>