多级关联下拉(select)菜单代码

By weisnet On 2009-05-04 At 20:14 View:604

JavaScript

///selPlace.js
////////////////////Place Database//////////////////////////
// Power By gloot Copyright!!
////////////////////////////////////////////////////////////
var PlaceCtl = function() {}
PlaceCtl.prototype.Place = {
qz: {
Name:"泉州",
ID:"1",
Places: { //Places s
fz:{
Name:"丰泽区",
ID:"1"
},
lc: {
Name:"鲤城区",
ID:"2"
},
lj: {
Name:"洛江区",
ID:"3"
},
qg: {
Name:"泉港区",
ID:"4"
},
ha: {
Name:"惠安县",
ID:"5"
},
jj: {
Name:"晋江市",
ID:"6"
},
ss: {
Name:"石狮市",
ID:"7"
},
la: {
Name:"南安市",
ID:"8"
},
dh: {
Name:"德化县",
ID:"9"
},
ax: {
Name:"安溪县",
ID:"10"
},
yc: {
Name:"永春",
ID:"1"
},
kfq: {
Name:"开发区",
ID:"1"
}
} ////Places e
}, //泉州 end
xm: {
Name:"厦门",
ID:"2",
Places: { //Places s
ta: {
Name:"同安区",
ID:"1"
},
sa: {
Name:"翔安区",
ID:"2"
}
}//Places e
} //厦门 e
}

\///调用页面 TestW.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestW.aspx.cs" Inherits="TestW" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>测试页面</title>
    <script type="text/javascript" src="js/selPlace.js"></script>
    <script type="text/javascript">
        var Pl = new PlaceCtl();

        function loadDr()
        {
            for (var items in Pl.Place)
            {
                document.getElementById('bc').options.add(new Option(Pl.Place[items].Name,Pl.Place[items].ID));
            }
        }

        function setSc(obj)
        {
            document.getElementById('sc').options.length = 1;
            for (var items in Pl.Place)
            {
                if (Pl.Place[items].Name == obj.options[obj.selectedIndex].text)
                {
                    for (itemsc in Pl.Place[items].Places)
                    {
                        document.getElementById('sc').options.add(new Option(Pl.Place[items].Places[itemsc].Name,Pl.Place[items].Places[itemsc].ID));
                    }
                }
            }

            //alert(document.body.innerHTML)
        }
    </script>
</head>
<body onload="loadDr()">
    <form id="form1" runat="server">
    <div>
        <select name="bc" id="bc" onchange="setSc(this)"><option>请选择</option></select>   <select name="sc" id="sc"><option>请选择</option></select>
    </div>
    </form>
</body>
</html>

//如果把.js文件里的PlaceCtl.prototype.Place项，无限扩展，就可实现多级联动的下拉菜单. 给最后一个select前的每一个select添加相应的onchange, 写相应的方法.

并相应改变:

for (var items in Pl.Place)
            {
                if (Pl.Place[items].Name == obj.options[obj.selectedIndex].text)
                {
                    for (itemsc in Pl.Place[items].Places)
                    {
                        document.getElementById('sc').options.add(new Option(Pl.Place[items].Places[itemsc].Name,Pl.Place[items].Places[itemsc].ID));
                    }
                }
            }