Warning: Unexpected character in input: ' in D:\php186\www.php186.com\index.php on line 38
 js三级联动菜单代码展示-WEB开发网
您的位置:网站主页> Javascript教程 > js三级联动菜单代码展示

js三级联动菜单代码展示

时间:2014-12-02 10:01:08   编辑:一切随缘   文章来源:php教程网 已阅读:3219 次

js三级联动菜单代码展示:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<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="myDiv">&nbsp;</div>
<SCRIPT LANGUAGE="JavaScript" DEFER>
var cMenu = ["上海","北京","深圳","济南"]
var cValue = ["shanghai","beijing","shenzhen","jinan"]
var aMenu = [["杨浦区","徐汇区","黄浦区","浦东新区"],["丰台区","海淀区"],["福田","宝安"],["市中","历下"]]
var aValue = [["yp","xh","hp","pd"],["ft","hd"],["ft","ba"],["sz","lx"]]
var dMenu = [[["市光新村","工农三村"],["徐汇新村","徐汇高楼"],["黄浦楼宇","外滩风景"],["浦东地铁","浦东机场"]],[["丰台体育馆","造甲村"],["亚运村"]],[["莲花山","商报大厦"],["深圳宝安机场","宝安开发区"]],[["山庄宾馆","山庄大酒店"],["千佛山东门","千佛山医院"]]]

var oDiv = document.all.myDiv;
var ocMenu = document.createElement("<SELECT name='city'>");            //创建城市列表框
var oaMenu = document.createElement("<SELECT name='cityArea'>");        //创建区域列表框
var odMenu = document.createElement("<SELECT name='cityAddress'>");     //创建地址列表框
with(oDiv)appendChild(ocMenu),appendChild(oaMenu),appendChild(odMenu);  //将以上三个列表框添加到div中
createMainOptions();
createSubOptions(0);
createSub2Options(0,0);

ocMenu.onchange = function() {//绑定城市下拉框的选择事件
    createSubOptions(this.selectedIndex);createSub2Options(this.selectedIndex,oaMenu.selectedIndex);};
oaMenu.onchange = function() {//绑定区域下拉框的选择事件
    createSub2Options(ocMenu.selectedIndex,this.selectedIndex);};

function createMainOptions() {
    for(var i=0;i<cMenu.length;i++)ocMenu.options[i] = new Option(cMenu[i],cValue[i]);//填充城市列表框内容
}
function createSubOptions(j) {
    with(oaMenu) {
        length=0;                                                                       //填充区域列表框内容
        for(var i=0;i<aMenu[j].length;i++)oaMenu.options[i] = new Option(aMenu[j][i],aValue[j][i]);
    }
}
function createSub2Options(j,k) {
    with(odMenu) {
        length=0;                                                  //填充地址列表框内容
        for(var i=0;i<dMenu[j][k].length;i++)odMenu.options[i] = new Option(dMenu[j][k][i]);
    }
}
ocMenu[1].selected=true;
ocMenu.fireEvent("onchange");
</SCRIPT>
</head>
<body>
</body>
</html>
 

本文地址:http://www.php186.com/content/article/js/23671.html(转载请保留)

相关关键词搜索:js三级联动菜单代码展示

查看评论更多>>
4楼 liujian 2015-04-21 17:34发表
好网站,值得收藏,以后会多多来看,很多文章内容都挺好的!
3楼 niulang 2015-04-21 17:33发表
不论国外,单是我们中国,各种各样的网站数不胜数。打开页面第一个看到的不是你的网站有什么,而是你的整体布局,一个清爽、干净、整洁的页面是一个赢得人心的法宝,大站有大站的气势,小站有小站的风格,好的视觉效果可以告诉人们这个站点有实力,这个站点值得信赖,给人很强的亲和力,有一种发现新宝地,希望赶紧收藏的冲动。
2楼 leenons 2015-04-21 17:28发表
现在看php学习网都会在百度上面找找看评分怎么样,值不值得一看;同时也会将看过的php教程网站记录,有时候留下一些自己的感想的评论,有很多逗比的评论,还有很多专业的评论,建议大家可以在web开发网上面寻找相关文章、api,大部分的内容都还合理。
1楼 xiaobudian 2015-04-21 17:25发表
网站文章挺不错的,值得学习,希望站长多多努力!
发表评论
      
* 以上用户言论只代表其个人观点,不代表www.php186.com网站的观点或立场
推荐文档更多

WEB开发网 | PHP教程 | Mysql教程 | Apache教程 | 最新文章 | PHP面试题| 网站地图 | Google地图 | Baidu地图 | 在线WEB论坛| 中纪委反腐最新消息

WEB技术QQ交流群:151888886 站长Q号:547218888
版权所有者:WEB开发网 地址:云南省文山州砚山县盘龙乡 滇ICP备12002707号-1
特别声明:本站内容仅供参考,不作为设计及确切依据!想了解更多,可立即进入Bbs提问