HTML中如何用JAVASCRIPT实现三级联动菜单?
如题目!
我想在HTML中用JAVASCRIPT实现三级联动菜单,但是我只写出来了两级,不知道第三级该怎么写!我写了三级子菜单,但是不知道如何显示出来!
请给出详细的代码!
谢谢了!
[解决办法]
javascript实现的省市县,三级联动菜单,源代码如下:
<html>
<head>
<title> 省市县关联菜单--blog.csdn.net/zhaoxiaoyang5156 </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<meta name= "Generator " content= "EditPlus ">
<meta name= "Description " content= "此程序为简单的省市县关联下拉菜单,有问题请往www.w3sky.com发信 ">
<style>
body,select
{
font-size:9pt;
font-family:Verdana;
}
a
{
color:red;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
</style>
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function Dsy()
{
this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined ") return false;
return true;
}
function change(v){
var str= "0 ";
for(i=0;i <v;i++){ str+=( "_ "+(document.getElementById(s[i]).selectedIndex-1));};
var ss=document.getElementById(s[v]);
with(ss){
length = 0;
options[0]=new Option(opt0[v],opt0[v]);
if(v && document.getElementById(s[v-1]).selectedIndex> 0 || !v)
{
if(dsy.Exists(str)){
ar = dsy.Items[str];
for(i=0;i <ar.length;i++)options[length]=new Option(ar[i],ar[i]);
if(v)options[1].selected = true;
}
}
if(++v <s.length){change(v);}
}
}
var dsy = new Dsy();
dsy.add( "0 ",[ "安徽 ", "北京 ", "福建 ", "甘肃 "]);
dsy.add( "0_0 ",[ "安庆 ", "蚌埠 ", "巢湖 ", "池州 ", "滁州 ", "阜阳 ", "合肥 ", "淮北 ", "淮南 ", "黄山 ", "六安 ", "马鞍山 ", "宿州 ", "铜陵 ", "芜湖 ", "宣城 ", "亳州 "]);
dsy.add( "0_0_0 ",[ "安庆市 ", "怀宁县 ", "潜山县 ", "宿松县 ", "太湖县 ", "桐城市 ", "望江县 ", "岳西县 ", "枞阳县 "]);
dsy.add( "0_0_1 ",[ "蚌埠市 ", "固镇县 ", "怀远县 ", "五河县 "]);
dsy.add( "0_0_2 ",[ "巢湖市 ", "含山县 ", "和县 ", "庐江县 ", "无为县 "]);
dsy.add( "0_0_3 ",[ "池州市 ", "东至县 ", "青阳县 ", "石台县 "]);
dsy.add( "0_0_4 ",[ "滁州市 ", "定远县 ", "凤阳县 ", "来安县 ", "明光市 ", "全椒县 ", "天长市 "]);
dsy.add( "0_0_5 ",[ "阜南县 ", "阜阳市 ", "界首市 ", "临泉县 ", "太和县 ", "颖上县 "]);
dsy.add( "0_0_6 ",[ "长丰县 ", "肥东县 ", "肥西县 "]);
dsy.add( "0_0_7 ",[ "淮北市 ", "濉溪县 "]);
dsy.add( "0_0_8 ",[ "凤台县 ", "淮南市 "]);
dsy.add( "0_0_9 ",[ "黄山市 ", "祁门县 ", "休宁县 ", "歙县 ", "黟县 "]);
dsy.add( "0_0_10 ",[ "霍邱县 ", "霍山县 ", "金寨县 ", "六安市 ", "寿县 ", "舒城县 "]);
dsy.add( "0_0_11 ",[ "当涂县 ", "马鞍山市 "]);
dsy.add( "0_0_12 ",[ "灵璧县 ", "宿州市 ", "萧县 ", "泗县 ", "砀山县 "]);
dsy.add( "0_0_13 ",[ "铜陵市 ", "铜陵县 "]);
dsy.add( "0_0_14 ",[ "繁昌县 ", "南陵县 ", "芜湖市 ", "芜湖县 "]);
dsy.add( "0_0_15 ",[ "广德县 ", "绩溪县 ", "郎溪县 ", "宁国市 ", "宣城市 ", "泾县 ", "旌德县 "]);
dsy.add( "0_0_16 ",[ "利辛县 ", "蒙城县 ", "涡阳县 ", "亳州市 "]);
dsy.add( "0_1 ",[ "北京 "]);
dsy.add( "0_1_0 ",[ "北京市 ", "密云县 ", "延庆县 "]);
dsy.add( "0_2 ",[ "福州 ", "龙岩 ", "南平 ", "宁德 ", "莆田 ", "泉州 ", "三明 ", "厦门 ", "漳州 "]);
dsy.add( "0_2_0 ",[ "长乐市 ", "福清市 ", "福州市 ", "连江县 ", "罗源县 ", "闽侯县 ", "闽清县 ", "平潭县 ", "永泰县 "]);
dsy.add( "0_2_1 ",[ "长汀县 ", "连城县 ", "龙岩市 ", "上杭县 ", "武平县 ", "永定县 ", "漳平市 "]);
dsy.add( "0_2_2 ",[ "光泽县 ", "建阳市 ", "建瓯市 ", "南平市 ", "浦城县 ", "邵武市 ", "顺昌县 ", "松溪县 ", "武夷山市 ", "政和县 "]);
dsy.add( "0_2_3 ",[ "福安市 ", "福鼎市 ", "古田县 ", "宁德市 ", "屏南县 ", "寿宁县 ", "霞浦县 ", "周宁县 ", "柘荣县 "]);
dsy.add( "0_2_4 ",[ "莆田市 ", "仙游县 "]);
dsy.add( "0_2_5 ",[ "安溪县 ", "德化县 ", "惠安县 ", "金门县 ", "晋江市 ", "南安市 ", "泉州市 ", "石狮市 ", "永春县 "]);
dsy.add( "0_2_6 ",[ "大田县 ", "建宁县 ", "将乐县 ", "明溪县 ", "宁化县 ", "清流县 ", "三明市 ", "沙县 ", "泰宁县 ", "永安市 ", "尤溪县 "]);
dsy.add( "0_2_7 ",[ "厦门市 "]);
dsy.add( "0_2_8 ",[ "长泰县 ", "东山县 ", "华安县 ", "龙海市 ", "南靖县 ", "平和县 ", "云霄县 ", "漳浦县 ", "漳州市 ", "诏安县 "]);
dsy.add( "0_3 ",[ "白银 ", "定西 ", "甘南藏族自治州 ", "嘉峪关 ", "金昌 ", "酒泉 ", "兰州 ", "临夏回族自治州 ", "陇南 ", "平凉 ", "庆阳 ", "天水 ", "武威 ", "张掖 "]);
dsy.add( "0_3_0 ",[ "白银市 ", "会宁县 ", "景泰县 ", "靖远县 "]);
dsy.add( "0_3_1 ",[ "定西县 ", "临洮县 ", "陇西县 ", "通渭县 ", "渭源县 ", "漳县 ", "岷县 "]);
dsy.add( "0_3_2 ",[ "迭部县 ", "合作市 ", "临潭县 ", "碌曲县 ", "玛曲县 ", "夏河县 ", "舟曲县 ", "卓尼县 "]);
dsy.add( "0_3_3 ",[ "嘉峪关市 "]);
dsy.add( "0_3_4 ",[ "金昌市 ", "永昌县 "]);
dsy.add( "0_3_5 ",[ "阿克塞哈萨克族自治县 ", "安西县 ", "敦煌市 ", "金塔县 ", "酒泉市 ", "肃北蒙古族自治县 ", "玉门市 "]);
dsy.add( "0_3_6 ",[ "皋兰县 ", "兰州市 ", "永登县 ", "榆中县 "]);
dsy.add( "0_3_7 ",[ "东乡族自治县 ", "广河县 ", "和政县 ", "积石山保安族东乡族撒拉族自治县 ", "康乐县 ", "临夏市 ", "临夏县 ", "永靖县 "]);
dsy.add( "0_3_8 ",[ "成县 ", "徽县 ", "康县 ", "礼县 ", "两当县 ", "文县 ", "武都县 ", "西和县 ", "宕昌县 "]);
dsy.add( "0_3_9 ",[ "崇信县 ", "华亭县 ", "静宁县 ", "灵台县 ", "平凉市 ", "庄浪县 ", "泾川县 "]);
dsy.add( "0_3_10 ",[ "合水县 ", "华池县 ", "环县 ", "宁县 ", "庆城县 ", "庆阳市 ", "镇原县 ", "正宁县 "]);
dsy.add( "0_3_11 ",[ "甘谷县 ", "秦安县 ", "清水县 ", "天水市 ", "武山县 ", "张家川回族自治县 "]);
dsy.add( "0_3_12 ",[ "古浪县 ", "民勤县 ", "天祝藏族自治县 ", "武威市 "]);
dsy.add( "0_3_13 ",[ "高台县 ", "临泽县 ", "民乐县 ", "山丹县 ", "肃南裕固族自治县 ", "张掖市 "]);
//-->
</SCRIPT>
<SCRIPT LANGUAGE = JavaScript>
<!--
//** Power www.w3sky.com
var s=[ "s1 ", "s2 ", "s3 "];
var opt0 = [ "省份 ", "地级市 ", "市、县级市、县 "];
function setup()
{
for(i=0;i <s.length-1;i++)
document.getElementById(s[i]).onchange=new Function( "change( "+(i+1)+ ") ");
change(0);
}
//-->
</SCRIPT>
</head>
<body bgcolor= "#E0E0E0 " onload= "setup() ">
多级关联菜单:
<form name= "frm ">
<select id= "s1 "> <option> 省份 </option> </select>
<select id= "s2 "> <option> 地级市 </option> </select>
<select id= "s3 "> <option> 市、县级市、县 </option> </select>
</form>
</body>
</html>
[解决办法]
现在已经有很多种方式了,至少可以用ajax来实现,这样代码看起来会相对简单一些,而且比较容易实现从数据库中读取菜单值,另外跟此类似的有iframe传值(个人认为不是很好,好像浏览器之前还兼容)
可以参考一下
[解决办法]
自己用的一个ajax程序集就是prototype.js这个,你可以上网找一下,这个使用起来还不错。也比较简单(当然它是怎么构造的就不用细究了,呵呵)