`
yingyingol
  • 浏览: 746380 次
文章分类
社区版块
存档分类
最新评论

三级联动菜单

 
阅读更多

全球一共有195个主权国家,以下191个国家是已经加入联合国的:
阿根廷,澳大利亚,比利时,玻利维亚,巴西,白俄罗斯,加拿大,智利,中国,哥伦比亚,哥斯达黎加,古巴,捷克斯洛伐克,丹麦,多米尼加共和国,厄瓜多尔,埃及,萨尔瓦多,埃塞俄比亚,法国,希腊,危地马拉,海地,洪都拉斯,印度,伊朗,伊拉克,黎巴嫩,利比里亚,卢森堡,墨西哥,荷兰,新西兰,尼加拉瓜,挪威,巴拿马,巴拉圭,秘鲁,菲律宾,波兰,俄罗斯联邦, 沙特阿拉伯,南非,阿拉伯叙利亚共和国,土耳其,乌克兰,大不列颠及北爱尔兰联合王国,美利坚合众国,乌拉圭,委内瑞拉,南斯拉夫 ,阿富汗,冰岛,瑞典,泰国,巴基斯坦,也门,缅甸,以色列,印度尼西亚,阿尔巴尼亚,澳地利,保加利亚,柬埔寨,芬兰,匈牙利,爱尔兰,意大利,约旦,老挝人民民主共和国, 罗马利亚,西班牙,斯里兰卡,阿拉伯利比亚民众国, 尼泊尔,葡萄牙 ,日本,摩洛哥,苏丹,突尼斯,加纳,马来西亚 ,几内亚,贝宁,布基纳法索, 喀麦隆,中非共和国, 乍得, 刚果,科特迪瓦,塞浦路斯,加蓬,马达加斯加,马里,尼日尔,尼日利亚,塞内加尔,索马里,多哥,刚果民主共和国 ,毛里塔尼亚, 蒙古, 塞拉利昂, 坦桑尼亚联合共和国,阿尔及利亚, 布隆迪, 牙买加, 卢旺达, 特立尼达和多巴哥, 乌干达,肯尼亚, 科威特,马拉维,马耳他,赞比亚,冈比亚,马尔代夫,新加坡,巴巴多斯,博茨瓦纳,圭亚那,莱索托 ,民主也门 ,赤道几内亚,毛里求斯,斯威士兰,斐济,巴林,不丹,阿曼, 卡塔尔, 阿拉伯联合酋长国,巴哈马, 德意志联邦共和国,德意志民主共和国 ,孟加拉国,格林纳达, 几内亚比绍 ,佛得角,科摩罗,莫桑比克,巴布亚新几内亚,圣多美和普林西比多米尼加, 所罗门群岛,苏里南 ,安哥拉, 萨摩亚, 塞舌尔,吉布提, 越南,圣卢西亚,圣文森特和格林纳丁斯, 津巴布韦,安提瓜和巴布达, 伯利兹, 瓦努阿图,圣基茨和尼维斯,文莱达鲁萨兰国 ,列支敦士登, 纳米比亚 ,朝鲜民主主义人民共和国, 爱沙尼亚, 密克罗尼西亚联邦, 拉脱维亚, 立陶宛, 马绍尔群岛, 大韩民国,亚美尼亚,阿塞拜疆,波斯尼亚和黑塞哥维那,*** 克罗地亚,** 格鲁吉亚, 哈萨克斯坦, 吉尔吉斯 , 摩尔多瓦, 圣 马 力 诺, 斯 洛 文 尼 亚,*** 塔吉克斯坦, 土库曼斯坦, 乌兹别克斯坦,安道尔, 捷克共和国, 厄立特里亚, 摩纳哥, 斯洛伐克共和国,前南斯拉夫的马其顿共和国,帕劳,基里巴斯共和国, 瑙鲁, 汤加,图瓦卢, 南斯拉夫*,瑞士,东帝汶
尚未加入联合国的是:梵蒂冈、巴勒斯坦,还有一共找不到,你自己找吧,巨汗~~~~~~~

中国各省市列表(地理普及帖)
名称 简称 行政中心'
---------------------
北京市 京 北京
浙江省 浙 杭州
天津市 津 天津
安徽省 皖 合肥
上海市 沪 上海
福建省 闽 福州
重庆市 渝 重庆
江西省 赣 南昌
香港特别行政区 港 香港
山东省 鲁 济南
澳门特别行政区 澳 澳门
河南省 豫 郑州
内蒙古自治区 内蒙古 呼和浩特
湖北省 鄂 武汉
新疆维吾尔自治区 新 乌鲁木齐
湖南省 湘 长沙
宁夏回族自治区 宁 银川
广东省 粤 广州
西藏自治区 藏 拉萨
海南省 海口
广西壮族自治区 桂 南宁
四川省 川或蜀 成都
河北省 冀 石家庄
贵州省 贵或黔 贵阳
山西省 晋 太原
云南省 云或滇 昆明
辽宁省 辽 沈阳
陕西省 陕或秦 西安
吉林省 吉 长春
甘肃省 甘或陇 兰州
黑龙江省 黑 哈尔滨
青海省 青 西宁
江苏省 苏 南京
台湾省 台 台北

求一表格包含中国所有直辖市,自治区,行政区,省及其所有城市名称?
悬赏分:50 - 解决时间:2007-12-16 07:38
同上,省份的要包含到所有城市,及县级市,区级市.
提问者: 不归001 - 千总 五级 最佳答案
直辖市
北京市:海淀区、东城区、西城区、宣武区、丰台区、朝阳区、崇文区、大兴区、石景山区、门头沟区、房山区、通州区、顺义区、怀柔区、昌平区、平谷区、密云县、延庆县

天津市:和平区、河西区、河北区、河东区、南开区、红桥区、北辰区、津南区、武清区、塘沽区、西青区、汉沽区、大港区、宝坻区、东丽区、蓟县、静海县、宁河县

上海:黄浦区、卢湾区、徐汇区、长宁区、静安区、普陀区、闸北区、杨浦区、虹口区、闵行区、宝山区、嘉定区、浦东新区、金山区、松江区、青浦区、南汇区、奉贤区、崇明县

重庆:渝中区、大渡口区、江北区、沙坪坝区、九龙坡区、南岸区、北碚区、万盛区、双桥区、渝北区、巴南区、万州区、涪陵区、黔江区、长寿区、江津区、永川区、南川区、綦江县、潼南县、铜梁县、大足县、荣昌县、璧山县、垫江县、武隆县、丰都县、城口县、梁平县、开县、巫溪县、巫山县、奉节县、云阳县、忠县、石柱土家族自治县、彭水苗族土家族自治县、酉阳苗族自治县、秀山土家族苗族自治县

自治区
新疆维吾尔自治区:2地级市-乌鲁木齐、克拉玛依19县级市-石河子、阿拉尔市、图木舒克、五家渠、哈密、吐鲁番、阿克苏、喀什、和田、伊宁、塔城、阿勒泰、奎屯、博乐、昌吉、阜康、库尔勒、阿图什、乌苏

西藏自治区:1地级市-拉萨
1县级市-日喀则

宁夏回族自治区:5地级市-银川、石嘴山、吴忠、固原、中卫
2县级市-青铜峡市、灵武市


内蒙古自治区:9地级市-呼和浩特、包头、乌海、赤峰、通辽、鄂尔多斯、呼伦贝尔、巴彦淖尔、乌兰察布
11县级市-霍林郭勒市、满洲里市、牙克石市、扎兰屯市、根河市、额尔古纳市、丰镇市、锡林浩特市、二连浩特市、乌兰浩特市、阿尔山市


广西壮族自治区:14地级市-南宁、柳州、桂林、梧州、北海、崇左、来宾、贺州、玉林、百色、河池、钦州、防城港、贵港
7县级市-岑溪、凭祥、合山、北流、宜州、东兴、桂平

省级行政单位
黑龙江-13地级市:哈尔滨、大庆、齐齐哈尔、佳木斯、鸡西、鹤岗、双鸭山、牡丹江、伊春、七台河、黑河、绥化
19县级市-五常、双城、尚志、纳河、虎林、密山、铁力、同江、富锦、绥芬河、海林、宁安、穆林、北安、五大连池、肇东、海伦、安达

吉林:8地级市-长春、吉林、四平、辽源、通化、白山、松原、白城
20县级市-九台市、榆树市、德惠市、舒兰市、桦甸市、蛟河市、磐石市、公主岭市、双辽市、梅河口市、集安市、临江市、大安市、洮南市、延吉市、图们市、敦化市、龙井市、珲春市、和龙市


辽宁:14地级市-沈阳、大连、鞍山、抚顺、本溪、丹东、锦州、营口、阜新、辽阳、盘锦、铁岭、朝阳、葫芦岛
17县级市-新民、瓦房店、普兰、庄河、海城、东港、凤城、凌海、北镇、大石桥、盖州、灯塔、调兵山、开原、凌源、北票、兴城

河北:11地级市-石家庄、唐山、邯郸、秦皇岛、保定、张家口、承德、廊坊、沧州、衡水、邢台
22县级市-辛集市、藁城市、晋州市、新乐市、鹿泉市、遵化市、迁安市、武安市、南宫市、沙河市、涿州市、定州市、安国市、高碑店市、泊头市、任丘市、黄骅市、河间市、霸州市、三河市、冀州市、深州市

山东:17地级市-济南、青岛、淄博、枣庄、东营、烟台、潍坊、济宁、泰安、威海、日照、莱芜、临沂、德州、聊城、菏泽、滨州
28县级市-章丘、胶南、胶州、平度、莱西、即墨、滕州、龙口、莱阳、莱州、招远、蓬莱、栖霞、海阳、青州、诸城、安丘、高密、昌邑、兖州、曲阜、邹城、乳山、文登、荣成、乐陵、临清、禹城

江苏:13地级市-南京、镇江、常州、无锡、苏州、徐州、连云港、淮安、盐城、扬州、泰州、南通、宿迁
27县级市-江阴市、宜兴市、邳州市、新沂市、金坛市、溧阳市、常熟市、张家港市、太仓市、昆山市、吴江市、如皋市、通州市、海门市、启东市、东台市、大丰市、高邮市、江都市、仪征市、丹阳市、扬中市、句容市、泰兴市、姜堰市、靖江市、兴化市

安徽:17地级市-合肥、蚌埠、芜湖、淮南、亳州、阜阳、淮北、宿州、滁州、安庆、巢湖、马鞍山、宣城、黄山、池州、铜陵
5县级市-界首、天长、明光、桐城、宁国

浙江:11地级市-杭州、嘉兴、湖州、宁波、金华、温州、丽水、绍兴、衢州、舟山、台州
22县级市-建德市、富阳市、临安市、余姚市、慈溪市、奉化市、瑞安市、乐清市、海宁市、平湖市、桐乡市、诸暨市、上虞市、嵊州市、兰溪市、义乌市、东阳市、永康市、江山市、临海市、温岭市、龙泉市

福建:9地级市-福州、厦门、泉州、三明、南平、漳州、莆田、宁德、龙岩
14县级市-福清市、长乐市、永安市、石狮市、晋江市、南安市、龙海市、邵武市、武夷山、建瓯市、建阳市、漳平市、福安市、福鼎市

广东:21地级市-广州、深圳、汕头、惠州、珠海、揭阳、佛山、河源、阳江、茂名、湛江、梅州、肇庆、韶关、潮州、东莞、中山、清远、江门、汕尾、云浮
22县级市-增城市、从化市、乐昌市、南雄市、台山市、开平市、鹤山市、恩平市、廉江市、雷州市 吴川市、高州市、化州市、高要市、四会市、兴宁市、陆丰市、阳春市、英德市、连州市、普宁市、罗定市

海南:2地级市-海口、三亚
6县级市-琼海、文昌、万宁、五指山、儋州、东方

云南:8地级市-昆明、曲靖、玉溪、保山、昭通、丽江、普洱、临沧
9县级市-安宁市、宣威市、个旧市、开远市、景洪市、楚雄市、大理市、潞西市、瑞丽市

贵州:4地级市-贵阳、六盘水、遵义、安顺
9县级市-清镇市、赤水市、仁怀市、铜仁市、毕节市、兴义市、凯里市、都匀市、福泉市

四川:18地级市-成都、绵阳、德阳、广元、自贡、攀枝花、乐山、南充、内江、遂宁、广安、泸州、达州、眉山、宜宾、雅安、资阳
14县级市-都江堰市、彭州市、邛崃市、崇州市、广汉市、什邡市、绵竹市、江油市、峨眉山市、阆中市、华蓥市、万源市、简阳市、西昌市

湖南:13地级市-长沙、株洲、湘潭、衡阳、岳阳、郴州、永州、邵阳、怀化、常德、益阳、张家界、娄底
16县级市-浏阳市、醴陵市、湘乡市、韶山市、耒阳市、常宁市、武冈市、临湘市、汨罗市、津市市、沅江市、资兴市、洪江市、冷水江市、涟源市、吉首市

湖北:12地级市-武汉、襄樊、宜昌、黄石、鄂州、随州、荆州、荆门、十堰、孝感、黄冈、咸宁
24县级市-大冶市、丹江口市、洪湖市、石首市、松滋市、宜都市、当阳市、枝江市、老河口市、枣阳市、宜城市、钟祥市、应城市、安陆市、汉川市、麻城市、武穴市、赤壁市、广水市、仙桃市、天门市、潜江市、恩施市、利川市

河南:17地级市-郑州、洛阳、开封、漯河、安阳、新乡、周口、三门峡、焦作、平顶山、信阳、南阳、鹤壁、濮阳、许昌、商丘、驻马店
21县级市-巩义市、新郑市、新密市、登封市、荥阳市、偃师市、汝州市、舞钢市、林州市、卫辉市、辉县市、沁阳市、孟州市、禹州市、长葛市、义马市、灵宝市、邓州市、永城市、项城市、济源市

山西:11地级市-太原、大同、忻州、阳泉、长治、晋城、朔州、晋中、运城、临汾、吕梁
11县级市-古交、潞城、高平、介休、永济、河津、原平、侯马、霍州、孝义、汾阳


陕西:10地级市-西安、咸阳、铜川、延安、宝鸡、渭南、汉中、安康、商洛、榆林
3县级市-兴平市、韩城市、华阴市

甘肃:12地级市-兰州、天水、平凉、酒泉、嘉峪关、金昌、白银、武威、张掖、庆阳、定西、陇南
4县级市-玉门市、敦煌市、临夏市、合作市

青海:1地级市-西宁
2县级市-格尔木、德令哈

江西:11地级市-南昌、九江、赣州、吉安、鹰潭、上饶、萍乡、景德镇、新余、宜春、抚州
10县级市-乐平市、瑞昌市、贵溪市、瑞金市、南康市、井冈山市、丰城市、樟树市、高安市、德兴市

台湾:7市-台北、台中、基隆、高雄、台南、新竹、嘉义
16县级市-板桥市、宜兰市、竹北市、桃园市、苗栗市、丰原市、彰化市、南投市、太保市、斗六市、新营市、凤山市、屏东市、台东市、花莲市、马公市

特别行政区
香港:中西区、东区、九龙城区、观塘区、南区、深水埗区、黄大仙区、湾仔区、油尖旺区、离岛区、葵青区、北区、西贡区、沙田区、屯门区、大埔区、荃湾区、元朗区。

澳门:花地玛堂区、圣安多尼堂区(花王堂区)、望德堂区、大堂区、风顺堂区(圣老楞佐堂区)、离岛、凼仔、路环

中国大学理学总排名


  排名 校名
1 北京大学
2 南京大学
3 中国科学技术大学
4 复旦大学
5 清华大学
6 浙江大学
7 中山大学
8 南开大学
9 吉林大学
10 武汉大学
11 山东大学
12 厦门大学
13 兰州大学
14 北京师范大学
15 四川大学
16 中国地质大学
17 上海交通大学
18 华东师范大学
19 西北大学
20 东北师范大学
21 云南大学
22 哈尔滨工业大学
23 西安交通大学
24 同济大学
25 大连理工大学
26 青岛海洋大学
27 天津大学
28 电子科技大学
29 中国农业大学
30 苏州大学
31 华中师范大学
32 南京师范大学
33 湖南大学
34 上海大学
35 华中科技大学
36 福州大学
37 湖南师范大学
38 中南大学
39 郑州大学
40 山西大学
41 陕西师范大学
42 西安电子科技大学
43 华东理工大学
44 内蒙古大学
45 河北大学
46 华南师范大学
47 河南师范大学
48 西南师范大学
49 石油大学
50 东北大学
51 北京理工大学
52 北京科技大学
53 河北师范大学
54 山东师范大学
55 西北师范大学
56 湘潭大学
57 南京气象学院
58 曲阜师范大学
59 暨南大学
60 华中农业大学
61 福建师范大学
62 扬州大学
63 济南大学
64 辽宁师范大学
65 西北工业大学
66 北京工业大学
67 新疆大学
68 成都理工大学
69 首都师范大学
70 南京农业大学
71 重庆大学
72 广州大学
73 东南大学
74 南京理工大学
75 安徽师范大学
76 天津师范大学
77 湖北大学
78 北京化工大学
79 河南大学
80 北京邮电大学
81 聊城师范学院
82 华南农业大学
83 广西大学
84 烟台师范学院
85 青岛大学
86 山东农业大学
87 四川师范大学
88 南昌大学
89 辽宁大学
90 中国矿业大学
91 湖南农业大学
92 山东科技大学
93 上海师范大学
94 山西师范大学
95 宁波大学
96 哈尔滨师范大学
97 合肥工业大学
98 浙江师范大学
99 北京航空航天大学
100 福建农林大学
101 烟台大学
102 西北农林科技大学
103 延边大学
104 江西师范大学
105 华南理工大学
106 云南师范大学
107 广西师范大学
108 徐州师范大学
109 中国药科大学
110 安徽大学
111 汕头大学
112 江汉石油学院
113 沈阳药科大学
114 湖北师范学院
115 贵州大学
116 西南石油学院
117 淮北煤炭师范学院
118 沈阳大学
119 太原理工大学
120 东北林业大学
121 南京工业大学
122 黑龙江大学
123 湛江师范学院
124 河北工业大学
125 昆明理工大学
126 燕山大学
127 武汉理工大学
128 山东工程学院
129 北京林业大学
130 南京林业大学
131 湘潭师范学院
132 淮阴师范学院
133 重庆师范学院
134 内蒙古师范大学
135 中央民族大学
136 西南农业大学
137 浙江工业大学
138 大连大学
139 深圳大学
140 安徽工业大学
141 安徽农业大学
142 南京航空航天大学
143 桂林工学院
144 东华大学
145 杭州电子工业学院
146 锦州师范学院
147 渝州大学
148 北方交通大学
149 四川师范学院
150 宁夏大学
151 大连海事大学
152 鞍山钢铁学院
153 长安大学
154 贵州师范大学
155 荆州师范学院
156 河南农业大学
157 中南林学院
158 山西农业大学
159 上海理工大学
160 内蒙古民族大学
161 南昌航空工业学院
162 成都信息工程学院
163 上海水产大学
164 西南交通大学
165 南京邮电学院
166 广东工业大学
167 西安理工大学
168 西安工业学院
169 温州师范学院
170 四川农业大学
171 阜阳师范学院
172 天津工业大学
173 华侨大学
174 北京工商大学
175 哈尔滨理工大学
176 抚顺石油学院
177 佳木斯大学
178 江苏石油化工学院
179 中国计量学院
180 中南民族学院
181 杭州商学院
182 海南师范学院
183 长沙电力学院
184 天津理工学院
185 河北农业大学
186 齐齐哈尔大学
187 盐城师范学院
188 东北农业大学
189 吉林农业大学
190 佛山科学技术学院
191 潍坊学院
192 玉溪师范学院
193 华北电力大学
194 上海电力学院
195 湘潭工学院
196 河海大学
197 海南大学
198 长春师范学院
199 河北科技大学
200 沈阳农业大学
201 西北民族学院
202 沈阳师范学院
203 信阳师范学院
204 北华大学
205 惠州学院
206 漳州师范学院
207 吉首大学
208 武汉化工学院
209 大庆石油学院
210 浙江林学院
211 长沙交通学院
212 皖西学院
213 西北轻工业学院
214 衡阳师范学院
215 安徽机电学院
216 山西财经大学
217 新疆师范大学
218 中国煤炭经济学院
219 临沂师范学院
220 茂名学院
221 西南科技大学
222 安徽医科大学
223 东北电力学院
224 鞍山师范学院
225 青岛建筑工程学院
226 四平师范学院
227 洛阳工学院
228 集美大学
229 重庆邮电学院
230 华北工学院
231 宝鸡文理学院
232 南华大学
233 山东轻工业学院
234 华东地质学院
235 广西民族学院
236 西安建筑科技大学
237 绍兴文理学院
238 杭州师范学院
239 石河子大学
240 通化师范学院
241 江苏大学
242 常德师范学院
243 广西师范学院
244 青海师范大学
245 西安石油学院
246 商丘师范学院
247 武汉科技大学
248 乐山师范学院
249 西南林学院
250 太原重型机械学院
251 桂林电子工业学院
252 洛阳师范学院
253 江南大学
254 沈阳化工学院
255 沈阳工业大学
256 贵州民族学院
257 南昌职业技术师范学院
258 新疆农业大学
259 太原师范学院
260 哈尔滨工程大学
261 黑龙江八一农垦大学
262 云南民族学院
263 河北理工学院
264 天津轻工业学院
265 淮南工业学院
266 西安联合大学
267 曲靖师范学院
268 雁北师范学院
269 焦作工学院
270 湖北民族学院
271 西安邮电学院
272 西安工程科技学院
273 肇庆学院
274 中国人民大学
275 浙江工程学院
276 莱阳农学院
277 西南民族学院
278 郑州轻工业学院
279 五邑大学
280 岳阳师范学院
281 武汉科技学院
282 淮海工学院
283 兰州铁道学院
284 韶关学院
285 安庆师范学院
286 青海民族学院
287 辽宁工学院
288 中国民用航空学院
289 吉林工学院
290 汉中师范学院
291 井冈山师范学院
292 天水师范学院
293 黄冈师范学院
294 渭南师范学院
295 孝感学院
296 河北职业技术师范学院
297 内蒙古农业大学
298 华南热带农业大学
299 南方冶金学院
300 北京联合大学
301 湛江海洋大学
302 辽宁工程技术大学
303 赣南师范学院
304 广东职业技术师范学院
305 延安大学
306 三峡大学
307 株洲工学院
308 河北建筑科技学院
309 上海财经大学
310 景德镇陶瓷学院
311 南阳师范学院
312 中南财经政法大学
313 上饶师范学院
314 甘肃工业大学
315 北京机械工业学院
316 北京建筑工程学院
317 重庆三峡学院
318 天津财经学院
319 河北经贸大学
320 甘肃农业大学
321 嘉应学院
322 韩山师范学院
323 廊坊师范学院
324 华东交通大学
325 浙江海洋学院
326 华北水利水电学院
327 安阳师范学院
328 泉州师范学院
329 内江师范学院
330 上海海运学院
331 云南农业大学
332 哈尔滨学院
333 西安科技学院
334 盐城工学院
335 湖北农学院
336 湖北工学院
337 淄博学院
338 浙江中医学院
339 桂林医学院
340 湖州师范学院
341 宜春学院
342 黑龙江科技学院
343 喀什师范学院
344 四川工业学院
345 湖南工程学院
346 淮南师范学院
347 唐山师范学院
348 青海大学
349 华北煤炭医学院
350 北京电子科技学院
351 西藏大学
352 襄樊学院
353 忻州师范学院
354 长春大学
355 南通师范学院
356 沈阳建筑工程学院
357 德州学院
358 伊犁师范学院
359 宁夏农学院
360 云南财贸学院
361 广西工学院
362 安徽建筑工业学院
363 大连民族学院
364 江西财经大学
365 牡丹江师范学院
366 天津职业技术师范学院
367 黑龙江工程学院
368 包头师范学院
369 南京晓庄学院
370 黔南民族师范学院
371 西北第二民族学院
372 玉林师范学院


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>联动下拉列表框</title>
<script>
var dept_divi_sect='<DEPT_DIVI_SECT>'+
'<DEPT ID="0" NAME="太平洋">'+
'<DIVI ID="01" NAME="开发部">'+
'<SECT ID="011" NAME="项目组" />'+
'<SECT ID="012" NAME="维护组" />'+
'</DIVI>'+
'<DIVI ID="02" NAME="工程部">'+
'<SECT ID="021" NAME="系统组" />'+
'</DIVI>'+
'</DEPT>'+
'<DEPT ID="2" NAME="运输部">'+
'<DIVI ID="21" NAME="租船处">'+
'<SECT ID="211" NAME="租船一科" />'+
'<SECT ID="212" NAME="租船二科" />'+
'</DIVI>'+
'<DIVI ID="22" NAME="业务处">'+
'<SECT ID="221" NAME="业务科" />'+
'<SECT ID="222" NAME="使费科" />'+
'</DIVI>'+
'<DIVI ID="23" NAME="商务处">'+
'<SECT ID="231" NAME="运费科" />'+
'<SECT ID="232" NAME="保赔科" />'+
'</DIVI>'+
'<DIVI ID="24" NAME="安监处">'+
'<SECT ID="241" NAME="调度庢" />'+
'<SECT ID="242" NAME="海监科" />'+
'<SECT ID="243" NAME="航保科" />'+
'<SECT ID="244" NAME="综合科" />'+
'</DIVI>'+
'</DEPT>'+
'</DEPT_DIVI_SECT>';
/*选择部门
id是用于区分同一个页面里多组这样的联动下拉列表框*/
function ChooseDept(id)
{
var selDept;
if(id==0)
selDept=frmPrograms.selDept;
else
selDept=frmPrograms.selDept1;
//var sourceName = "./dept_divi_sect.php";
//用于生成xml的程序文件,
//这里我为了大家有一个直观的感觉,写了一段示例XML代替,
//如果要加载XML文件,下面就改用load()。
var source = new ActiveXObject('Microsoft.XMLDOM');
source.async = false;
//source.load(sourceName);
source.loadXML(dept_divi_sect);
root = source.documentElement;
sortFieldText=root.selectNodes("/DEPT_DIVI_SECT/DEPT/@NAME");
sortFieldValue=root.selectNodes("/DEPT_DIVI_SECT/DEPT/@ID");
var oOption = document.createElement('OPTION');
oOption.text = " 请选择 ";
oOption.value = "-1";
selDept.options.add(oOption);
for(var i=0;i<sortFieldText.length;++i)
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortFieldText[i].text+" ";
oOption.value = sortFieldValue[i].text;
selDept.options.add(oOption);
}
ChooseDivi(id);
}
/*选择处室*/
function ChooseDivi(id)
{
var selDept;
var selDivi;
if(id==0)
{
selDept=frmPrograms.selDept;
selDivi=frmPrograms.selDivi;
}
else
{
selDept=frmPrograms.selDept1;
selDivi=frmPrograms.selDivi1;
}
x=selDept.selectedIndex;
y=selDept.options[x].value;
sortFieldText=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y+"']/DIVI/@NAME");
sortFieldValue=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y+"']/DIVI/@ID");
for(var i=selDivi.options.length-1;i>=0;--i)
{
selDivi.options.remove(i)
}
var oOption = document.createElement('OPTION');
oOption.text = " 请选择 ";
oOption.value = "-1";
selDivi.options.add(oOption);
for(i=0;i<sortFieldText.length;++i)
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortFieldText[i].text+" ";
oOption.value = sortFieldValue[i].text;
selDivi.options.add(oOption);
}
ChooseSect(id);
}
/*选择科室*/
function ChooseSect(id)
{
var selDept;
var selDivi;
var selSect;
if(id==0)
{
selDept=frmPrograms.selDept;
selDivi=frmPrograms.selDivi;
selSect=frmPrograms.selSect;
}
else
{
selDept=frmPrograms.selDept1;
selDivi=frmPrograms.selDivi1;
selSect=frmPrograms.selSect1;
}
x1=selDept.selectedIndex;
y1=selDept.options[x1].value;
x2=selDivi.selectedIndex;
y2=selDivi.options[x2].value;
if(x2==0)
{
sortFieldText=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y1+"']//SECT/@NAME");
sortFieldValue=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y1+"']//SECT/@ID");
}
else
{
sortFieldText=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y1+"']/DIVI[@ID='"+y2+"']/SECT/@NAME");
sortFieldValue=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y1+"']/DIVI[@ID='"+y2+"']/SECT/@ID");
}
for(var i=selSect.options.length-1;i>=0;--i)
{
selSect.options.remove(i)
}
var oOption = document.createElement('OPTION');
oOption.text = " 请选择 ";
oOption.value = "-1";
selSect.options.add(oOption);
for(i=0;i<sortFieldText.length;++i)
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortFieldText[i].text+" ";
oOption.value = sortFieldValue[i].text;
selSect.options.add(oOption);
}
}
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="ChooseDept(0);ChooseDept(1)">
<form name="frmPrograms" method="post" action="">
<table width="100%" border="0" cellpadding="5" cellspacing="1">
<tr>
<td> <div align="left">&nbsp;&nbsp;部门名称
<select name="selDept" id="select2" onChange="ChooseDivi(0)">
</select>
<select name="selDept1" id="select" onChange="ChooseDivi(1)">
</select>
</div></td>
</tr>
<tr>
<td>&nbsp;&nbsp;处室名称
<select name="selDivi" id="select4" onChange="ChooseSect(0)">
</select>
<select name="selDivi1" id="select3" onChange="ChooseSect(1)">
</select></td>
</tr>
<tr>
<td>&nbsp;&nbsp;科室名称
<select name="selSect" id="select5">
</select>
<select name="selSect1" id="select6">
</select></td>
</tr>
</table>
</form>
</body>
</html>

谁能给出网页中3个下拉列表的关联代码
悬赏分:50 - 解决时间:2006-9-11 19:48
我想做3个列表选项框,第3个列表里面的元素会根据第2个列表的选择选择而自动改变,而第2个列表的选项内容又是根据第1个选择自动改变 ,比如第一个下拉列表有美国,中国,法国,这样3个选择内容,如果我选择了中国,那么第二个下拉列表的内容自动变为浙江,江苏,湖北,如果我选择了美国,那么第二个下拉列表的内容就自动变为华盛顿,纽约,旧金山。当我第一个选择中国,第二个选择湖北后,第3个下拉列表的内容就是武汉市,荆门市,黄冈市,当我第一个选择中国,第二个选择浙江后,第3个下拉列表的内容就是杭州市,宁波市 ,基本上就是这么个意思,请问这样的代码要怎么写,国家名,省的名称,城市的名称是从数据库里读
问题补充:50分悬赏
谢谢你的回答,我把你的代码运行了一下,是二级关联的,但是我要三级的啊,(我的例子里就是国家,省,城市三级的)


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<script>
function GetObjID(ObjName)
{ for (var ObjID=0; ObjID < window.Form1.elements.length; ObjID++)
if ( window.Form1.elements[ObjID].name == ObjName )
{ return(ObjID);
break;
}
return(-1);
}
function ChangeOption(ObjName, DesName)
{
//GET OBJECT VALUE, ID OF DESTINATION OBJECT
ObjID = GetObjID(ObjName);
DesObjID = GetObjID(DesName);
if ( ObjID != -1 && DesObjID != -1 )
{
CatValue = window.Form1.elements[ObjID].value.substring(0, 2);
if ( CatValue == "0" )
document.Form1.elements[DesObjID].length=0;
else
{ //PARSING
document.Form1.elements[DesObjID].length=0;
var tt = document.Form1.SkillCode.value;
var SubCategory = tt.split(";");
//GENERATE OPTIONS
j=0;
for (var i=0; i< SubCategory.length; i++ )
{
pp = SubCategory[i].split(",");
if ( pp[0].substring(0,2) == CatValue && pp[0].substring(2,4) != "00" )
{
document.Form1.elements[DesObjID].options[j]= new Option( pp[1], pp[0]);
j++;
}//if
}//for
}//if
}//if
}
</script>
<body>
<FORM NAME="Form1" METHOD="POST" >
<TABLE width="90%" border="0" cellspacing="3" cellpadding="3">
<INPUT TYPE="HIDDEN" NAME="SkillCode" VALUE="0100,AS/400;0101,CL;0102,COBOL;0103,ILE;0104,RPG;0105,RPG400;0106,RPGIII/IV;0107,Synon;0200,Data Warehousing;0201,CASE;0202,Data Analyst;0203,Data Architect;0204,Data Marts;0205,Data Mining;0206,Data Modeling;0207,ERwin;0208,SAS;0300,Database Systems;0301,Access;0302,Capacity Planning;0303,Database Administrator;0304,DB2;0305,FoxPro;0306,Informix;0307,Oracle;0308,Progress;0309,SQL;0310,SQL Server;0311,Sybase;0312,Jasmine;0313,CMMS;0400,E-Commerce;0401,ActiveX;0402,ASP;0403,CGI;0404,Cold Fusion;0405,PHP;0406,CSS;0407,DHTML;0408,E-Commerce;0409,E-Commerce Platforms;0410,EDI;0411,Electronic Payment;0412,HTML;0413,IIS;0414,Java;0415,JavaScript;0416,PERL;0417,Security;0418,VBScript;0419,Visual J++;0420,VRML;0421,Web Servers;0422,Webmaster;0423,XML;0424,Broad Vision;0425,MOM;0426,Visual Basic;0500,ERP;0501,BAAN;0502,JD Edwards;0503,Lawson;0504,Oracle;0505,PeopleSoft;0506,SAP;0600,Executive Level;0601,Business Development;0602,Financial Services;0603,Marketing/Sales;0604,Senior Executive;0605,Technology;0700,HARDWARE;0701,Cable Modem;0702,Chipware;0703,Drivers;0704,Embedded Systems;0705,Firmware;0706,Hardware;0707,IEEE;0708,Operating System Designers;0800,Help Desk;0801,AS/400;0802,CICS;0803,Unix;0804,Windows 95;0805,Windows 98;0806,Windows NT/2000;0807,Hardware;0808,Lotus Notes;0809,Mac;0810,MS Office;0811,Network;0812,Novell;0813,PC/Desktop;0900,Legacy Systems;0901,ADABAS;0902,Assembler;0903,CA-;0904,CICS;0905,COBOL;0906,DB2;0907,DEC/VAX;0908,FOCUS;0909,GEAC;0910,IDMS;0911,IMS;0912,MicroFocus;0913,MQSeries;0914,MVS;0915,Natural;0916,OS/2;0917,OS/390;0918,PL/1;0919,REXX;0920,SAS;0921,Tape Operator;0922,Teradata;0923,VM;0924,VSAM;0925,TSO;1000,CAD/CAM;1001,CADAM;1002,AUTOCAD;1003,CATIA;1100,Miscellaneous;1101,Accounting;1102,Administrative Support;1103,Analyst;1104,Business Developer;1105,Customer Service;1106,Human Resources;1107,Traditional Engineer;1200,Networking;1201,ADSL;1202,ATM;1203,Banyan;1204,Bay;1205,cc:Mail;1206,Cisco;1207,CNE;1208,Engineer;1209,Firewall;1210,Frame Relay;1211,Hubs/ Routers;1212,ISDN;1213,LAN/ WAN;1214,Lotus;1215,Mail;1216,MCP;1217,MCSE;1218,Motorola;1219,NetWare;1220,PBX;1221,RF;1222,Security;1223,SMS;1224,SNA;1225,Sniffer;1226,Sonet;1227,Telecom;1228,Windows NT/2000;1229,TCP/IP;1230,VPN;1231,X.25;1300,New Media;1301,Adobe Photoshop;1302,Corel Draw;1303,Director;1304,Flash;1305,Games;1306,Graphics;1307,Illustrator;1308,Image/Imaging;1309,Mac;1310,Multimedia;1311,PageMaker;1312,PowerPoint;1313,Quark;1314,Shockwave;1315,Vizact 2000;1316,Dreamweaver;1400,Project Management;1401,Capacity Planning;1402,Change Management;1403,Configuration Management;1404,Contingency Planning;1405,Defect Management;1406,Disaster Recovery;1407,ISO;1408,Methodology;1409,Metrics;1410,Microsoft Project;1411,PMI;1412,Procurement;1413,Risk Management;1414,Scope Management;1415,SDLC;1416,SEI/CMM;1500,Quality Assurance;1501,Change Management;1502,Configuration Management;1503,Defect Management;1504,Metrics;1505,PVCS;1506,QA/Tester;1507,Quality Control;1508,SEI/CMM;1509,Source Safe/Visual Source Safe;1510,SQA;1511,Test Scripts;1512,Version Control;1513,WinRunner;1600,Technical Recruiting;1601,Account Executive;1602,Manager;1603,Recruiter;1604,Business-to-Business Marketing;1605,Consultants;1606,Contigency Search;1607,Direct Sourcing;1608,Outsourcing;1609,Retained Search;1700,Tech Sales/Marketing;1701,Account Executive;1702,Marketing Representative;1703,Sales Representative;1704,Strategist;1705,Business Demographics;1706,Call Point;1707,Cloning customers;1708,Coding;1709,DatabaseMarketing;1710,Lifetime value (LTV);1711,Sales Cycle;1712,SFA Tools;1713,SIC Code;1800,Technical Writer;1801,Corel Draw;1802,HTML;1803,PowerPoint;1804,Publisher;1805,RoboHelp;1806,Visio;1807,Word;1808,WordPerfect;1809,XML;1810,Acrobat;1811,ForeHelp;1812,Premier 2000;1813,FrameMaker;1814,Online Help;1815,Paint Shop Pro;1900,Unix;1901,AIX;1902,C/C++;1903,CORBA;1904,Embedded;1905,HP-UX;1906,Java;1907,Linux;1908,OpenView;1909,Perl;1910,Scripts;1911,Sun Solaris;1912,TCL/TK;1913,Tivoli;1914,Tuxedo;2000,Windows develop;2001,Access;2002,ActiveX;2003,C/C++;2004,COM/DCOM;2005,COOL:Gen;2006,CORBA;2007,Crystal Reports;2008,Delphi;2009,Developer/ Designer 2000;2010,DNA;2011,Forte;2012,Fox Pro;2013,GUI;2014,Java;2015,MCSD;2016,MFC/ATL;2017,OLAP;2018,OO;2019,PowerBuilder;2020,Pro*C;2021,Smalltalk;2022,Visual Basic;2023,Visual C++;2024,Win32;2025,Visual FoxPro;">
<TR>
<TD COLSPAN="4">左边是IT技能的大类,右边是详细的技能<br>
</TD>
</TR>
<TR>
<TD><select name="SkillName" style="width:250" OnChange="JavaScript:ChangeOption('SkillName','SubSkill')">
<OPTION VALUE="0">---请选择---</OPTION>
<OPTION VALUE=0100>中国</OPTION>
<OPTION VALUE=0200>英国</OPTION>
<OPTION VALUE=0300>韩国</OPTION>
<OPTION VALUE=0400>法国</OPTION>
<OPTION VALUE=0500>美国</OPTION>
<OPTION VALUE=0600>俄国</OPTION>
</select>
<select name="SubSkill" style="width:250">
<OPTION VALUE=2001>青岛</OPTION>
<OPTION VALUE=2002>北京</OPTION>
<OPTION VALUE=2003>上海</OPTION>
<OPTION VALUE=2004>天津</OPTION>
<OPTION VALUE=2005>深圳</OPTION>
</select>
</TD>
</TR>
</table>
</form>
</body>
</html>

如何让三个下拉列表框关联?
悬赏分:50 - 解决时间:2008-7-24 11:47
一个页面有三个下拉列表框A,B,C,三个列表框的值都来自三个数据库A1,B2,C3,A1表内的值显示在A中,现在要实现选定A后,根据A的选择调入B2的值到列表B中,再选定B后,根据B的选择调入C3的值到列表C中,最后返回C的值,请问大家这个代码应该怎么书写,ASP语言。
<script language="JavaScript" type="text/javascript">
var hotel_selectArr = [];

var search_classArr = [];
search_classArr[0]=[ //所有查询方式列表

{txt:'五星级', val:'5'},
{txt:'四星级', val:'4'},
{txt:'三星级', val:'3'},
{txt:'二星级', val:'2'},
{txt:'无星级', val:'0'},
{txt:'价位:500元以上', val:'10'},
{txt:'价位:400--500元', val:'9'},
{txt:'价位:300--400元', val:'8'},
{txt:'价位:200--300元', val:'7'},
{txt:'价位:100--200元', val:'6'},
{txt:'海水浴场附近', val:'11'},
{txt:'环海滨一线', val:'12'},
{txt:'市中心', val:'13'},
{txt:'汽车、火车站', val:'14'},
{txt:'文登', val:'15'},
{txt:'乳山', val:'16'},
{txt:'荣成', val:'17'},
];

search_classArr[1]=[ //星级查询方式列表

{txt:'五星级', val:'5'},
{txt:'四星级', val:'4'},
{txt:'三星级', val:'3'},
{txt:'二星级', val:'2'},
{txt:'无星级', val:'0'},
];

search_classArr[2]=[ //价位查询方式列表

{txt:'价位:500以上', val:'10'},
{txt:'价位:400--500', val:'9'},
{txt:'价位:300--400', val:'8'},
{txt:'价位:200--300', val:'7'},
{txt:'价位:100--200', val:'6'},
];

search_classArr[3]=[ //所在地查询方式列表

{txt:'海水浴场附近', val:'11'},
{txt:'环海一线', val:'12'},
{txt:'市中心', val:'13'},
{txt:'汽车、火车站', val:'14'},
{txt:'文登', val:'15'},
{txt:'乳山', val:'16'},
{txt:'荣成', val:'17'},
];


hotel_selectArr[0]=[ //'无星级酒店列表

{txt:'山东大学威海国际学术中心', val:'26'},

{txt:'刘公岛宾馆', val:'29'},

{txt:'索菲亚(威海)商务酒店', val:'31'},

{txt:'乳山市财税培训中心', val:'34'},

{txt:'高斯湾大酒店', val:'37'},

{txt:'蓝天碧海宾馆', val:'41'},

{txt:'威海缘创商务大酒店', val:'73'},

{txt:'威 海 昀 泰 商 务 大 酒 店', val:'74'},

{txt:'威海夏威夷商务酒店', val:'77'},

{txt:'威海震琳宾馆', val:'78'},

{txt:'自由东方公寓酒店', val:'79'},

{txt:'自由东方休闲会所', val:'80'},

{txt:'矿泉宾馆', val:'43'},

{txt:'启明假日酒店', val:'50'},

{txt:'国际海景城公寓酒店', val:'52'},

{txt:'如家快捷酒店威海卫店', val:'54'},

{txt:'华夏会馆', val:'58'},

{txt:'心悦海景酒店', val:'59'},

{txt:'抱海大酒店', val:'60'},

{txt:'丰盛园客舍', val:'62'},

{txt:'金海湾花园酒店式公寓', val:'64'},

{txt:'威海丽湾宾馆', val:'65'},

{txt:'威海时代商务酒店', val:'69'},

{txt:'威海宾馆', val:'70'},

{txt:'威海大饭店', val:'72'},

];

hotel_selectArr[1]=[ //所有酒店列表

{txt:'金海湾国际饭店', val:'1'},

{txt:'合庆饭店', val:'2'},

{txt:'威海中心大酒店', val:'6'},

{txt:'蓝天宾馆', val:'9'},

{txt:'庆威大厦', val:'11'},

{txt:'威海卫大厦', val:'16'},

{txt:'光明花园大酒店', val:'18'},

{txt:'白天鹅宾馆', val:'22'},

{txt:'华海宾馆', val:'23'},

{txt:'山东大学威海国际学术中心', val:'26'},

{txt:'威海东方宾馆', val:'27'},

{txt:'刘公岛宾馆', val:'29'},

{txt:'海林宾馆', val:'30'},

{txt:'索菲亚(威海)商务酒店', val:'31'},

{txt:'新闻大厦', val:'32'},

{txt:'乳山市财税培训中心', val:'34'},

{txt:'威海珍珠丽华大酒店', val:'35'},

{txt:'金海岸大酒店', val:'36'},

{txt:'高斯湾大酒店', val:'37'},

{txt:'威海清泉大酒店', val:'38'},

{txt:'山东省(威海)干部培训中心', val:'40'},

{txt:'蓝天碧海宾馆', val:'41'},

{txt:'矿泉宾馆', val:'43'},

{txt:'滨海之星假日酒店', val:'46'},

{txt:'威海国际商务大厦', val:'47'},

{txt:'圆楼大酒店', val:'48'},

{txt:'兆龙宾馆', val:'49'},

{txt:'启明假日酒店', val:'50'},

{txt:'国际海景城公寓酒店', val:'52'},

{txt:'中汇大酒店', val:'53'},

{txt:'如家快捷酒店威海卫店', val:'54'},

{txt:'海悦建国饭店', val:'55'},

{txt:'九九大厦', val:'56'},

{txt:'敬兰酒店', val:'57'},

{txt:'华夏会馆', val:'58'},

{txt:'心悦海景酒店', val:'59'},

{txt:'抱海大酒店', val:'60'},

{txt:'长威大酒店', val:'61'},

{txt:'丰盛园客舍', val:'62'},

{txt:'伴月山庄大酒店', val:'63'},

{txt:'金海湾花园酒店式公寓', val:'64'},

{txt:'威海丽湾宾馆', val:'65'},

{txt:'阳光大厦', val:'66'},

{txt:'金猴商务会馆', val:'67'},

{txt:'威海中原油田绿岛宾馆', val:'68'},

{txt:'威海时代商务酒店', val:'69'},

{txt:'威海宾馆', val:'70'},

{txt:'文登 劳动大厦', val:'71'},

{txt:'威海大饭店', val:'72'},

{txt:'威海缘创商务大酒店', val:'73'},

{txt:'威 海 昀 泰 商 务 大 酒 店', val:'74'},

{txt:'万馥通宾馆', val:'75'},

{txt:'祥德聚酒店', val:'76'},

{txt:'威海夏威夷商务酒店', val:'77'},

{txt:'威海震琳宾馆', val:'78'},

{txt:'自由东方公寓酒店', val:'79'},

{txt:'自由东方休闲会所', val:'80'},

];

hotel_selectArr[2]=[ //'2星级酒店列表

{txt:'威海东方宾馆', val:'27'},

{txt:'海林宾馆', val:'30'},

{txt:'威海清泉大酒店', val:'38'},

{txt:'万馥通宾馆', val:'75'},

{txt:'祥德聚酒店', val:'76'},

{txt:'兆龙宾馆', val:'49'},

{txt:'文登 劳动大厦', val:'71'},

];
hotel_selectArr[3]=[ //'3星级酒店列表

{txt:'威海中心大酒店', val:'6'},

{txt:'华海宾馆', val:'23'},

{txt:'庆威大厦', val:'11'},

{txt:'新闻大厦', val:'32'},

{txt:'威海珍珠丽华大酒店', val:'35'},

{txt:'金海岸大酒店', val:'36'},

{txt:'山东省(威海)干部培训中心', val:'40'},

{txt:'中汇大酒店', val:'53'},

{txt:'敬兰酒店', val:'57'},

{txt:'滨海之星假日酒店', val:'46'},

{txt:'威海国际商务大厦', val:'47'},

{txt:'圆楼大酒店', val:'48'},

{txt:'九九大厦', val:'56'},

{txt:'长威大酒店', val:'61'},

{txt:'伴月山庄大酒店', val:'63'},

{txt:'金猴商务会馆', val:'67'},

{txt:'威海中原油田绿岛宾馆', val:'68'},

];
hotel_selectArr[4]=[ //'4星级酒店列表

{txt:'合庆饭店', val:'2'},

{txt:'蓝天宾馆', val:'9'},

{txt:'威海卫大厦', val:'16'},

{txt:'光明花园大酒店', val:'18'},

{txt:'白天鹅宾馆', val:'22'},

{txt:'阳光大厦', val:'66'},

];
hotel_selectArr[5]=[ //'5星级酒店列表

{txt:'金海湾国际饭店', val:'1'},

{txt:'海悦建国饭店', val:'55'},

];

hotel_selectArr[6]=[ //100--200价位酒店列表

{txt:'威海东方宾馆', val:'27'},

{txt:'乳山市财税培训中心', val:'34'},

{txt:'兆龙宾馆', val:'49'},

{txt:'心悦海景酒店', val:'59'},

{txt:'威海大饭店', val:'72'},

];

hotel_selectArr[7]=[ //200--300价位酒店列表

{txt:'海林宾馆', val:'30'},

{txt:'索菲亚(威海)商务酒店', val:'31'},

{txt:'新闻大厦', val:'32'},

{txt:'威海珍珠丽华大酒店', val:'35'},

{txt:'威海清泉大酒店', val:'38'},

{txt:'山东省(威海)干部培训中心', val:'40'},

{txt:'蓝天碧海宾馆', val:'41'},

{txt:'中汇大酒店', val:'53'},

{txt:'矿泉宾馆', val:'43'},

{txt:'滨海之星假日酒店', val:'46'},

{txt:'威海国际商务大厦', val:'47'},

{txt:'圆楼大酒店', val:'48'},

{txt:'如家快捷酒店威海卫店', val:'54'},

{txt:'华夏会馆', val:'58'},

{txt:'丰盛园客舍', val:'62'},

{txt:'伴月山庄大酒店', val:'63'},

{txt:'威海中原油田绿岛宾馆', val:'68'},

{txt:'威海宾馆', val:'70'},

{txt:'文登 劳动大厦', val:'71'},

];

hotel_selectArr[8]=[ //300--400价位酒店列表

{txt:'光明花园大酒店', val:'18'},

{txt:'白天鹅宾馆', val:'22'},

{txt:'华海宾馆', val:'23'},

{txt:'庆威大厦', val:'11'},

{txt:'刘公岛宾馆', val:'29'},

{txt:'金海岸大酒店', val:'36'},

{txt:'敬兰酒店', val:'57'},

{txt:'启明假日酒店', val:'50'},

{txt:'九九大厦', val:'56'},

{txt:'长威大酒店', val:'61'},

{txt:'金海湾花园酒店式公寓', val:'64'},

{txt:'威海丽湾宾馆', val:'65'},

{txt:'阳光大厦', val:'66'},

{txt:'金猴商务会馆', val:'67'},

{txt:'威海时代商务酒店', val:'69'},

];

hotel_selectArr[9]=[ //400--500价位酒店列表

{txt:'合庆饭店', val:'2'},

{txt:'蓝天宾馆', val:'9'},

{txt:'威海卫大厦', val:'16'},

{txt:'抱海大酒店', val:'60'},

];

hotel_selectArr[10]=[ //500以上价位酒店列表

{txt:'金海湾国际饭店', val:'1'},

{txt:'山东大学威海国际学术中心', val:'26'},

{txt:'高斯湾大酒店', val:'37'},

{txt:'国际海景城公寓酒店', val:'52'},

{txt:'海悦建国饭店', val:'55'},

];


hotel_selectArr[11]=[ //区域在:海水浴场附近酒店列表

{txt:'金海湾国际饭店', val:'1'},

{txt:'庆威大厦', val:'11'},

{txt:'山东大学威海国际学术中心', val:'26'},

{txt:'山东省(威海)干部培训中心', val:'40'},

{txt:'中汇大酒店', val:'53'},

{txt:'国际海景城公寓酒店', val:'52'},

{txt:'海悦建国饭店', val:'55'},

{txt:'九九大厦', val:'56'},

{txt:'长威大酒店', val:'61'},

{txt:'金海湾花园酒店式公寓', val:'64'},

{txt:'金猴商务会馆', val:'67'},

];


hotel_selectArr[12]=[ //区域在:环海滨一线附近酒店列表

{txt:'合庆饭店', val:'2'},

{txt:'蓝天宾馆', val:'9'},

{txt:'华海宾馆', val:'23'},

{txt:'刘公岛宾馆', val:'29'},

{txt:'金海岸大酒店', val:'36'},

{txt:'高斯湾大酒店', val:'37'},

{txt:'威海国际商务大厦', val:'47'},

{txt:'启明假日酒店', val:'50'},

{txt:'心悦海景酒店', val:'59'},

{txt:'抱海大酒店', val:'60'},

{txt:'伴月山庄大酒店', val:'63'},

{txt:'威海中原油田绿岛宾馆', val:'68'},

{txt:'威海宾馆', val:'70'},

];


hotel_selectArr[13]=[ //区域在:市中心附近酒店列表

{txt:'威海中心大酒店', val:'6'},

{txt:'威海卫大厦', val:'16'},

{txt:'光明花园大酒店', val:'18'},

{txt:'白天鹅宾馆', val:'22'},

{txt:'威海东方宾馆', val:'27'},

{txt:'海林宾馆', val:'30'},

{txt:'索菲亚(威海)商务酒店', val:'31'},

{txt:'新闻大厦', val:'32'},

{txt:'威海珍珠丽华大酒店', val:'35'},

{txt:'威海清泉大酒店', val:'38'},

{txt:'蓝天碧海宾馆', val:'41'},

{txt:'敬兰酒店', val:'57'},

{txt:'矿泉宾馆', val:'43'},

{txt:'滨海之星假日酒店', val:'46'},

{txt:'圆楼大酒店', val:'48'},

{txt:'兆龙宾馆', val:'49'},

{txt:'如家快捷酒店威海卫店', val:'54'},

{txt:'丰盛园客舍', val:'62'},

{txt:'阳光大厦', val:'66'},

{txt:'威海大饭店', val:'72'},

];


hotel_selectArr[14]=[ //区域在:车站附近酒店列表

{txt:'华夏会馆', val:'58'},

{txt:'威海丽湾宾馆', val:'65'},

{txt:'威海时代商务酒店', val:'69'},

];


hotel_selectArr[15]=[ //区域在:文登酒店列表

{txt:'文登 劳动大厦', val:'71'},

];


hotel_selectArr[16]=[ //区域在:乳山酒店列表

{txt:'乳山市财税培训中心', val:'34'},

];


hotel_selectArr[17]=[ //区域在:荣成酒店列表

];





function sethotel_select(level_selcet) {
setSelectOption('hotel_select', hotel_selectArr[level_selcet], '请选择酒店名称'); }
function setclass_select(class_select) {
setSelectOption('level_selcet', search_classArr[class_select], '请选择'); }


function setSelectOption(selectObj, optionList, firstOption, selected) { if (typeof selectObj != 'object') { selectObj = document.getElementById(selectObj); }
// removeOptions(selectObj);
var start = 0;
if (firstOption) { selectObj.options[0] = new Option(firstOption, '');
start ++; }
var len = optionList.length;
for (var i=0; i < len; i++) {
selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);
if(selected == optionList[i].val) {
selectObj.options[start].selected = true; }
start ++; } }

/*function removeOptions(selectObj) { if (typeof selectObj != 'object') { selectObj = document.getElementById(selectObj); }


var len = selectObj.options.length; for (var i=0; i < len; i++) {

selectObj.options[0] = null; } } */

</script><style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>

<form name="form1" method="post" action="../hotel_detail.asp" target="_blank">
<table width="499" height="152" border="0" background="../image/M_beijing1.gif">
<!--DWLayoutTable-->

<tr>
<td width="36" height="22">&nbsp;</td>
<td width="197" valign="top"><label><br />
<select name="class_select" id="class_select" onChange="if(this.value != '') setclass_select(this.options[this.selectedIndex].value);">
<option value="0">请选择查询方式</option>
<option value="1">按星级查询</option>
<option value="2">按价位查询</option>
<option value="3">按所在地区查询</option>
</select>
</label></td>
<td colspan="2" rowspan="3" align="center"><a href="http://www.whzydf.com/" target="_blank"><img src="images/golden bay.GIF" border="0" title="广告形象语、形象标识征集" width="140" height="105" /></a></td>
</tr>
<tr>
<td height="22">&nbsp;</td>
<td valign="top"><label>
<select name="level_selcet" id="level_selcet" onChange="if(this.value != '') sethotel_select(this.options[this.selectedIndex].value);">
<option value="1">请选择</option>
<option value="5">五星级</option>
<option value="4">四星级</option>
<option value="3">请先选择查询方式</option>
<option value="2">请先选择查询方式</option>
<option value="0">请先选择查询方式</option>
<option value="10">请先选择查询方式</option>
<option value="9">请先选择查询方式</option>
<option value="8">请先选择查询方式</option>
<option value="7">请先选择查询方式</option>
<option value="6">请先选择查询方式</option>
<option value="11">请先选择查询方式</option>
<option value="12">请先选择查询方式</option>
<option value="13">请先选择查询方式</option>
<option value="14">请先选择查询方式</option>
<option value="15">请先选择查询方式</option>
<option value="16">请先选择查询方式</option>
<option value="17">请先选择查询方式</option>
</select>
</label></td>
</tr>
<tr>
<td height="21">&nbsp;</td>
<td valign="top"><select name="hid" id="hotel_select">
<option value="">请选择酒店名称</option>

<option value="1">金海湾国际饭店</option>

<option value="2">合庆饭店</option>

<option value="6">威海中心大酒店</option>

<option value="9">蓝天宾馆</option>

<option value="11">庆威大厦</option>

<option value="16">威海卫大厦</option>

<option value="18">光明花园大酒店</option>

<option value="22">白天鹅宾馆</option>

<option value="23">华海宾馆</option>

<option value="26">山东大学威海国际学术中心</option>

<option value="27">威海东方宾馆</option>

<option value="29">刘公岛宾馆</option>

<option value="30">海林宾馆</option>

<option value="31">索菲亚(威海)商务酒店</option>

<option value="32">新闻大厦</option>

<option value="34">乳山市财税培训中心</option>

<option value="35">威海珍珠丽华大酒店</option>

<option value="36">金海岸大酒店</option>

<option value="37">高斯湾大酒店</option>

<option value="38">威海清泉大酒店</option>

<option value="40">山东省(威海)干部培训中心</option>

<option value="41">蓝天碧海宾馆</option>

<option value="43">矿泉宾馆</option>

<option value="46">滨海之星假日酒店</option>

<option value="47">威海国际商务大厦</option>

<option value="48">圆楼大酒店</option>

<option value="49">兆龙宾馆</option>

<option value="50">启明假日酒店</option>

<option value="52">国际海景城公寓酒店</option>

<option value="53">中汇大酒店</option>

<option value="54">如家快捷酒店威海卫店</option>

<option value="55">海悦建国饭店</option>

<option value="56">九九大厦</option>

<option value="57">敬兰酒店</option>

<option value="58">华夏会馆</option>

<option value="59">心悦海景酒店</option>

<option value="60">抱海大酒店</option>

<option value="61">长威大酒店</option>

<option value="62">丰盛园客舍</option>

<option value="63">伴月山庄大酒店</option>

<option value="64">金海湾花园酒店式公寓</option>

<option value="65">威海丽湾宾馆</option>

<option value="66">阳光大厦</option>

<option value="67">金猴商务会馆</option>

<option value="68">威海中原油田绿岛宾馆</option>

<option value="69">威海时代商务酒店</option>

<option value="70">威海宾馆</option>

<option value="71">文登 劳动大厦</option>

<option value="72">威海大饭店</option>

<option value="73">威海缘创商务大酒店</option>

<option value="74">威 海 昀 泰 商 务 大 酒 店</option>

<option value="75">万馥通宾馆</option>

<option value="76">祥德聚酒店</option>

<option value="77">威海夏威夷商务酒店</option>

<option value="78">威海震琳宾馆</option>

<option value="79">自由东方公寓酒店</option>

<option value="80">自由东方休闲会所</option>

</select></td>
</tr>


<tr>
<td height="32"></td>
<td></td>
<td width="238"><input type="image" src="../image/chaxun.gif" name="image" /></td>
<td width="10" align="right" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
</table>
</FORM>


jsp联动下拉列表怎摸实现
悬赏分:20 - 解决时间:2006-12-12 10:46
我说的是三级的!

<html>
<head>
<title>三级下拉菜单 (通用版)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function CreateSelect(_FormName,_SName,_SValue,_Ds,_AllOptionStr,ShowType)
{
if (_FormName=="")
_FormName = "all"
var _DsArr = _Ds.split("|")
var _Ds1,_Ds2,_Ds3
var _Ds1 = _DsArr[0]
var _Ds2 = (_DsArr.length>1)?_DsArr[1]:_DsArr[0]
var _Ds3 = (_DsArr.length>2)?_DsArr[2]:_DsArr[0]

var _SNameArr = _SName.split("|")
var _SName1,_SName2,_SName3
var _SName1 = _SNameArr[0]
var _SName2 = (_SNameArr.length>1)?_SNameArr[1]:_SNameArr[0]
var _SName3 = (_SNameArr.length>2)?_SNameArr[2]:_SNameArr[0]

var _SValueArr = _SValue.split("|")
var _SValue1,_SValue2,_SValue3
var _SValue1 = _SValueArr[0]
var _SValue2 = (_SValueArr.length>1)?_SValueArr[1]:_SValueArr[0]
var _SValue3 = (_SValueArr.length>2)?_SValueArr[2]:_SValueArr[0]

if (ShowType==3){
_AllOptionStr = _AllOptionStr.replace(//(/(/ig,"/(/("+_Ds3+"/^")
_AllOptionStr = _AllOptionStr.replace(//{/{/ig,"/{/{"+_Ds2+"/(/("+_Ds3+"/*/*")
}
else if(ShowType==2){
_AllOptionStr = _AllOptionStr.replace(//{/{/ig,"/{/{"+_Ds2+"/(/("+_Ds3+"/*/*")
}
else if(ShowType==1){
_AllOptionStr = _AllOptionStr.replace(//(/(/ig,"/(/("+_Ds3+"/^")
}
var AllStr = _Ds1 + "{{"+ _Ds2 + "(("+ _Ds3 +"||"+_AllOptionStr
//alert(AllStr)
var _AR0 = AllStr.split("||");
document.writeln("<select name=/"" + _SName1 + "/" size=/"1/" onChange=/""+_SName1+"redirect(this.options.selectedIndex)/">");
for (var i1 = 0;i1 < _AR0.length;i1++)
{
var Area1Str = _AR0[i1];
var _AR10 = Area1Str.split("{{");
var _AR11 = _AR10[0].split("@");
var Tstr1 = _AR11[0];
var Vstr1 = (_AR11.length==2)?_AR11[1]:_AR11[0]
document.writeln("<option value=/""+Vstr1+"/">"+Tstr1+"<//option>");
}
document.writeln("<//select>");
document.writeln("<select name=/"" + _SName2 + "/" size=/"1/" onChange=/""+_SName1+"redirect1(this.options.selectedIndex)/">");
var _AR111 = _Ds2.split("@");
var Tstr11 = _AR111[0];
var Vstr11 = (_AR111.length==2)?_AR111[1]:_AR111[0];
document.writeln("<option value=/""+Vstr11+"/">"+Tstr11+"<//option>");
document.writeln("<//select>");
document.writeln("<select name=/"" + _SName3 + "/" size=/"1/">");
var _AR222 = _Ds3.split("@");
var Tstr22 = _AR222[0];
var Vstr22 = (_AR222.length==2)?_AR222[1]:_AR222[0];
document.writeln("<option value=/""+Vstr22+"/">"+Tstr22+"<//option>");
document.writeln("<//select>");
document.writeln("<S"+"CRIPT LANGUAGE=/"JavaScript/" defer>");
document.writeln("<!--");
document.writeln("var "+_SName1+"NewAllStr = /""+ AllStr +"/"");
document.writeln("var "+_SName1+"_AR0 = "+_SName1+"NewAllStr.split(/"||/");");
document.writeln("var "+_SName1+"groups=document."+ _FormName +"." + _SName1 + ".options.length;");
document.writeln("var "+_SName1+"group=new Array("+_SName1+"groups)");
document.writeln("for (i=0; i<"+_SName1+"groups; i++){");
document.writeln(" "+_SName1+"group[i]=new Array();");
document.writeln("}");
document.writeln("for (var i1 = 0;i1 < "+_SName1+"_AR0.length;i1++){");
document.writeln(" var Area1Str = "+_SName1+"_AR0[i1];");
document.writeln(" var _AR10 = Area1Str.split(/"{{/");");
document.writeln(" var _AR12 = _AR10[1].split(/"**/");");
document.writeln(" for (var i2 = 0;i2 < _AR12.length;i2++){");
document.writeln(" var Area2Str = _AR12[i2];");
document.writeln(" var _AR20 = Area2Str.split(/"((/");");
document.writeln(" var _AR211 = _AR20[0].split(/"@/");");
document.writeln(" var Tstr2 = _AR211[0];");
document.writeln(" var Vstr2 = (_AR211.length==2)?_AR211[1]:_AR211[0];");
document.writeln(" "+_SName1+"group[i1][i2]=new Option(Tstr2,Vstr2);");
document.writeln(" }");
document.writeln("}");
document.writeln("var "+_SName1+"temp = document."+ _FormName +"." + _SName2);
document.writeln("function "+_SName1+"redirect(x){");
document.writeln(" for (m="+_SName1+"temp.options.length-1;m>0;m--)");
document.writeln(" "+_SName1+"temp.options[m]=null;");
document.writeln(" for (i=0;i<"+_SName1+"group[x].length;i++){");
document.writeln(" "+_SName1+"temp.options[i]=new Option("+_SName1+"group[x][i].text,"+_SName1+"group[x][i].value);");
document.writeln(" }");
document.writeln(" "+_SName1+"temp.options[0].selected=true");
document.writeln(" "+_SName1+"redirect1(0)");
document.writeln("}");
document.writeln("var "+_SName1+"Group2s=document."+ _FormName +"." + _SName2 + ".options.length;");
document.writeln("var "+_SName1+"Group2=new Array("+_SName1+"groups);");
document.writeln("for (i=0; i<"+_SName1+"groups; i++){");
document.writeln(" "+_SName1+"Group2[i]=new Array("+_SName1+"group[i].length)");
document.writeln(" for (j=0; j<"+_SName1+"group[i].length; j++){");
document.writeln(" "+_SName1+"Group2[i][j]=new Array()");
document.writeln(" }");
document.writeln("}");
document.writeln("for (var i1 = 0;i1 < "+_SName1+"_AR0.length;i1++){");
document.writeln(" var Area1Str = "+_SName1+"_AR0[i1]");
document.writeln(" var _AR10 = Area1Str.split(/"{{/");");
document.writeln(" var _AR12 = _AR10[1].split(/"**/");");
document.writeln(" for (var i2 = 0;i2 < _AR12.length;i2++){");
document.writeln(" var Area2Str = _AR12[i2]");
document.writeln(" var _AR20 = Area2Str.split(/"((/");");
document.writeln(" _AR212 = _AR20[1].split(/"^/");");
document.writeln(" for (var i3 = 0;i3 < _AR212.length;i3++){");
document.writeln(" Area3Str = _AR212[i3]");
document.writeln(" _AR3 = Area3Str.split(/"@/");");
document.writeln(" Tstr3 = _AR3[0]");
document.writeln(" Vstr3 = (_AR3.length==2)?_AR3[1]:_AR3[0]");
document.writeln(" "+_SName1+"Group2[i1][i2][i3]=new Option(Tstr3,Vstr3);");
document.writeln(" }");
document.writeln(" }");
document.writeln("}");
document.writeln("var "+_SName1+"temp1=document."+ _FormName +"." + _SName3 + "");
document.writeln("function "+_SName1+"redirect1(y){");
document.writeln(" for (m="+_SName1+"temp1.options.length-1;m>0;m--)");
document.writeln(" "+_SName1+"temp1.options[m]=null");
document.writeln(" for (i=0;i<"+_SName1+"Group2[document."+ _FormName +"." + _SName1 + ".options.selectedIndex][y].length;i++){");
document.writeln(" "+_SName1+"temp1.options[i]=new Option("+_SName1+"Group2[document."+ _FormName +"." + _SName1 + ".options.selectedIndex][y][i].text," + _SName1 + "Group2[document."+ _FormName +"." + _SName1 + ".options.selectedIndex][y][i].value)");
document.writeln(" }");
document.writeln(" "+_SName1+"temp1.options[0].selected=true");
document.writeln("}");
document.writeln("////-->");
document.writeln("<//script>");
document.writeln("<s"+"cript language=/"JavaScript/">");
document.writeln("<!--");
document.writeln("function "+_SName1+"SetValue(){");
document.writeln(" try{");
document.writeln(" if (/""+_SValue1+"/"!=/"/"){");
document.writeln(" document."+ _FormName +"."+_SName1+".value=/""+_SValue1+"/"");
document.writeln(" "+_SName1+"redirect(document."+ _FormName +"."+_SName1+".options.selectedIndex);");
document.writeln(" if (/""+_SValue2+"/"!=/"/"){");
document.writeln(" document."+ _FormName +"."+_SName2+".value=/""+_SValue2+"/"");
document.writeln(" "+_SName1+"redirect1(document."+ _FormName +"."+_SName2+".options.selectedIndex)");
document.writeln(" if (/""+_SValue3+"/"!=/"/")");
document.writeln(" document."+ _FormName +"."+_SName3+".value=/""+_SValue3+"/"");
document.writeln(" }");
document.writeln(" }");
document.writeln(" }");
document.writeln(" catch(e){");
document.writeln(" }");
document.writeln("}");
document.writeln("window.attachEvent(/"onload/","+_SName1+"SetValue)");
document.writeln("////-->");
document.writeln("<//script>");
}
//-->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var AllStr1 = ""
+"东北地区{{"
+"黑龙江((哈尔滨^齐齐哈尔^牡丹江^佳木斯^大庆^绥化^鹤岗^鸡西^黑河^双鸭山^伊春^七台河^大兴安岭"
+"**吉林((长春^吉林^四平^辽源^通化^白山^松原^白城^延边"
+"**辽宁((沈阳^大连^鞍山^抚顺^本溪^丹东^锦州^营口^阜新^辽阳^盘锦^铁岭^朝阳^葫芦岛"
+"||华北地区{{"
+"北京((东城^西城^崇文^宣武^朝阳^丰台^石景山^海淀^门头沟^房山^通州^顺义^昌平^大兴^平谷^怀柔^密云^延庆"
+"**天津((和平^东丽^河东^西青^河西^津南^南开^北辰^河北^武清^红挢^塘沽^汉沽^大港^宁河^静海^宝坻^蓟县"
+"**山东((济南^青岛^淄博^枣庄^东营^烟台^潍坊^济宁^泰安^威海^日照^莱芜^临沂^德州^聊城^滨州^菏泽"
+"**河北((石家庄^邯郸^邢台^保定^张家口^承德^廊坊^唐山^秦皇岛^沧州^衡水"
+"**河南((郑州^开封^洛阳^平顶山^安阳^鹤壁^新乡^焦作^濮阳^许昌^漯河^三门峡^南阳^商丘^信阳^周口^驻马店^济源"
+"**山西((太原^大同^阳泉^长治^晋城^朔州^吕梁^忻州^晋中^临汾^运城"
+"**内蒙古((呼和浩特^包头^乌海^赤峰^呼伦贝尔盟^阿拉善盟^哲里木盟^兴安盟^乌兰察布盟^锡林郭勒盟^巴彦淖尔盟^伊克昭盟"
+"||华中地区{{"
+"湖北((武汉^宜昌^荆州^襄樊^黄石^荆门^黄冈^十堰^恩施^潜江^天门^仙桃^随州^咸宁^孝感^鄂州"
+"**湖南((长沙^常德^株洲^湘潭^衡阳^岳阳^邵阳^益阳^娄底^怀化^郴州^永州^湘西^张家界"
+"||华南地区{{"
+"广东((广州^深圳^珠海^汕头^东莞^中山^佛山^韶关^江门^湛江^茂名^肇庆^惠州^梅州^汕尾^河源^阳江^清远^潮州^揭阳^云浮"
+"**广西((南宁^柳州^桂林^梧州^北海^防城港^钦州^贵港^玉林^南宁地区^柳州地区^贺州^百色^河池"
+"**福建((福州^厦门^莆田^三明^泉州^漳州^南平^龙岩^宁德"
+"**海南((海口^三亚"
+"||西南地区{{"
+"四川((成都^绵阳^德阳^自贡^攀枝花^广元^内江^乐山^南充^宜宾^广安^达川^雅安^眉山^甘孜^凉山^泸州"
+"**重庆((万州^涪陵^渝中^大渡口^江北^沙坪坝^九龙坡^南岸^北碚^万盛^双挢^渝北^巴南^黔江^长寿^綦江^潼南^铜梁^大足^荣昌^壁山^梁平^城口^丰都^垫江^武隆^忠县^开县^云阳^奉节^巫山^巫溪^石柱^秀山^酉阳^彭水^江津^合川^永川^南川"
+"**贵州((贵阳^六盘水^遵义^安顺^铜仁^黔西南^毕节^黔东南^黔南"
+"**云南((昆明^大理^曲靖^玉溪^昭通^楚雄^红河^文山^思茅^西双版纳^保山^德宏^丽江^怒江^迪庆^临沧"
+"**西藏((拉萨^日喀则^山南^林芝^昌都^阿里^那曲"
+"||西北地区{{"
+"陕西((西安^宝鸡^咸阳^铜川^渭南^延安^榆林^汉中^安康^商洛"
+"**甘肃((兰州^嘉峪关^金昌^白银^天水^酒泉^张掖^武威^定西^陇南^平凉^庆阳^临夏^甘南"
+"**宁夏((银川^石嘴山^吴忠^固原"
+"**青海((西宁^海东^海南^海北^黄南^玉树^果洛^海西"
+"**新疆((乌鲁木齐^石河子^克拉玛依^伊犁^巴音郭勒^昌吉^克孜勒苏柯尔克孜^博尔塔拉^吐鲁番^哈密^喀什^和田^阿克苏"
+"||华东地区{{"
+"上海((黄浦^卢湾^徐汇^长宁^静安^普陀^闸北^虹口^杨浦^闵行^宝山^嘉定^浦东^金山^松江^青浦^南汇^奉贤^崇明"
+"**江苏((南京^镇江^苏州^南通^扬州^盐城^徐州^连云港^常州^无锡^宿迁^泰州^淮安"
+"**浙江((杭州^宁波^温州^嘉兴^湖州^绍兴^金华^衢州^舟山^台州^丽水"
+"**安徽((合肥^芜湖^蚌埠^马鞍山^淮北^铜陵^安庆^黄山^滁州^宿州^池州^淮南^巢湖^阜阳^六安^宣城^亳州"
+"**江西((南昌市^景德镇^九江^鹰潭^萍乡^新馀^赣州^吉安^宜春^抚州^上饶"
+"||港澳台地区{{"
+"香港((香港"
+"**澳门((澳门"
+"**台湾((台北^高雄^台中^台南^屏东^南投^云林^新竹^彰化^苗栗^嘉义^花莲^桃园^宜兰^基隆^台东^金门^马祖^澎湖"
+"||其它地区{{"
+"其它((其它"
//-->
</SCRIPT>
<FORM name="HwForm">
<HR>选择一次<br>
<SCRIPT LANGUAGE="JavaScript">
CreateSelect("","S_13|S_23|S_33","","请选择地区@|请选择省份@|请选择城市@",AllStr1,0);
</SCRIPT>
<HR>选择三次<br>
<SCRIPT LANGUAGE="JavaScript">
CreateSelect("HwForm","S_1|S_2|S_3","华北地区|山东|济宁","请选择地区@|请选择省份@|请选择城市@",AllStr1,3);
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
var AllStr2 = ""
+"笔记本{{"
+"IBM((R32^T40^T42"
+"**DELL((N600^M600"
+"||数码相机{{"
+"CANON((A75^A80^A85"
+"**SONY((S80^S60"
//-->
</SCRIPT>
<HR>选择二次<br><SCRIPT LANGUAGE="JavaScript">
CreateSelect("HwForm","S_11|S_21|S_31","笔记本|IBM|T42","请选择分类@|请选择品牌@|请选择系列@",AllStr2,2);
</SCRIPT>
<HR>选择二次<br><SCRIPT LANGUAGE="JavaScript">
CreateSelect("HwForm","S_12|S_22|S_32","","请选择分类@|请选择品牌@|请选择系列@",AllStr2,1);
</SCRIPT>
</FORM>
</body>
</html>


三级联动下拉列表,分别显示本机的数据库名,表名,字段名。
悬赏分:10 - 解决时间:2008-8-24 13:55
三级联动下拉列表,一个显示本机的数据库名,一个显示选中的数据库中的表名,另一个显示选中的数据库名表名下的字段名。
现在我用jsp实现的,可是我想不出来怎样把第一个下拉列表所选中的数据库名传递到第二个下拉列表中,这样第二个下拉列表显示的就都是选中的数据库中的表。非常急迫。谢谢大家拉!!!尽量具体说明!!!
问题补充:我用的是MyEclipse,mysql,tomcat
提问者: garfield198506 - 试用期 一级 最佳答案
给你段三级联运菜单的代码,你学习一下.网上基本流行这段代码.

之后你的问题在于,你用的是什么类型的数据库,怎样取出数据库库中各表以及各表的字段.

<%
set rs=server.createobject("adodb.recordset")
rs.open"select * from class_two",conn,1,1
'三级联动下拉列表[数据库版]


‘---------以上是查询出第一级下拉列表的内容-----
’---------以下是用JS来控制程序--------------
%>

<script language = "JavaScript">
var onecount; //定义onecount对像
onecount=0;//初始值为0
subcat = new Array(); //SUBCAT对像是一个新的数组
<%
count = 0 '定义count对像初始值为0
do while not rs.eof '循环表头到表尾
%>
subcat[<%=count%>] = new Array("<%=rs("class_two_text")%>","<%=trim(rs("class_one"))%>","<%=trim(rs("class_two"))%>");
//以上为重点内容,对像数组(subcat[count对像值])= 新数组内容('字段名0','字段名1','字段名2')记住要对应
<%
count = count + 1 '循环count一次,COUNT的值加1
rs.movenext
loop
rs.close
%>
onecount=<%=count%>;
function changelocation(locationid)
{
document.form.class_two.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[1] == locationid)
{
document.form.class_two.options[document.form.class_two.length] = new Option(subcat[0], subcat[2]);
}
}
}
</script>
<%
set rs=server.CreateObject("adodb.recordset")
rs.open "select * from Class_one" ,conn,1,1
if rs.eof then
response.Write"暂无产品一类名称"
else%>
产品一类
<select name="class_one" id="class_one"
onChange="changelocation(document.form.class_one.options[document.form.class_one.selectedIndex].value)">
<%do while not rs.eof%>
<option value="<%=rs("class_one")%>"><%=rs("class_one_text")%></option>
<%rs.movenext
loop
end if
%>
</select>
产品二类
<select name="class_two"
onChange="three(document.form.class_one.value,document.form.class_two.options[document.form.class_two.selectedIndex].value)">
<option value="请选择条件" selected>请选择条件</option>
</select> <%
set rs=server.createobject("adodb.recordset")
rs.open"select * from class_three",conn,1,1
%> <script language = "JavaScript">
var twocount;
twocount=0;
subthree = new Array();
<%
countb = 0
do while not rs.eof
%>
subthree[<%=countb%>] = new
Array("<%=rs("class_three_text")%>","<%=trim(rs("class_one"))%>","<%=trim(rs("class_two"))%>","<%=trim(rs("class_three"))%>");
<%
countb = countb + 1
rs.movenext
loop
rs.close
%>
twocount=<%=countb%>;
function three(threeid,threeid2)
{
document.form.class_three.length = 0;
var threeid=threeid;
var threeid2=threeid2;
var i;
for (i=0;i < twocount; i++)
{
if ((subthree[1] == threeid) & (subthree[2] == threeid2))
{
document.form.class_three.options[document.form.class_three.length] = new Option(subthree[0],
subthree[3]);
}
}
}
</script>
产品三类
<select name="class_three" id="class_three">
<option value="0" selected>请选择条件</option>
</select>


网站制作中怎么把这个2级菜单栏修改成3级的三级dropdown弹出菜单?
悬赏分:20 - 解决时间:2008-8-23 01:25
问题补充:代码太长了,请见网站
http://www.webjx.com/htmldata/2005-05-31/1117489973.html
我想把他做成3级的,请高手指点!!!!
提问者: xiaoyao5210 - 试用期 一级 最佳答案
不妨看看这个:

把里面相关的菜单改成你自己的就行了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" _fcksavedurl="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" _fcksavedurl="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三级dropdown弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html" _fcksavedurl="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" _fcksavedurl="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" _fcksavedurl="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" _fcksavedurl="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" _fcksavedurl="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="hide" href="../menu/hover_click.html" _fcksavedurl="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" _fcksavedurl="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" _fcksavedurl="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" _fcksavedurl="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" _fcksavedurl="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" _fcksavedurl="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" _fcksavedurl="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" _fcksavedurl="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" _fcksavedurl="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="index.html" _fcksavedurl="index.html">MENUS</a>
<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" _fcksavedurl="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" _fcksavedurl="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" _fcksavedurl="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" _fcksavedurl="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" _fcksavedurl="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" _fcksavedurl="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" _fcksavedurl="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../layouts/index.html" _fcksavedurl="../layouts/index.html">LAYOUTS</a>
<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../layouts/bodyfix.html" _fcksavedurl="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" _fcksavedurl="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" _fcksavedurl="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" _fcksavedurl="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" _fcksavedurl="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../boxes/index.html" _fcksavedurl="../boxes/index.html">BOXES</a>
<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" _fcksavedurl="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" _fcksavedurl="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" _fcksavedurl="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" _fcksavedurl="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" _fcksavedurl="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" _fcksavedurl="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" _fcksavedurl="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../mozilla/index.html" _fcksavedurl="../mozilla/index.html">MOZILLA</a>
<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" _fcksavedurl="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" _fcksavedurl="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" _fcksavedurl="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" _fcksavedurl="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" _fcksavedurl="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" _fcksavedurl="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" _fcksavedurl="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" _fcksavedurl="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" _fcksavedurl="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../ie/index.html" _fcksavedurl="../ie/index.html">EXPLORER</a>
<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../ie/exampleone.html" _fcksavedurl="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" _fcksavedurl="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" _fcksavedurl="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../opacity/index.html" _fcksavedurl="../opacity/index.html">OPACITY</a>
<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../opacity/colours.html" _fcksavedurl="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" _fcksavedurl="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" _fcksavedurl="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" _fcksavedurl="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
<li><a class="hide" href="../menu/hover_click.html" _fcksavedurl="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK
<table><tr><td>
<![endif]-->
<ul class="left">
<li><a href="../menu/form.html" _fcksavedurl="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" _fcksavedurl="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" _fcksavedurl="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</body>
</html>

纯css做的,下面给出的是二级垂直下拉菜单:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS制作下拉菜单方法三 CSS垂直下拉菜单</title>
<style type="text/css">
body {
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}
h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}
p {
font: 11px Arial, Helvetica, sans-serif;
}
a {
color: #900;
text-decoration: none;
}
a:hover {
background: #900;
color: #FFF;
}
/*CSS Code for Menu Begin:*/
/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px; /*For KHTML*/
list-style: none;
}
ul#navmenu li {
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
position: relative;
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
background: #EEE;
color: #666;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
</style>
<script type="text/javascript">
<!--
navHover = function() {
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover//b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
-->
</script>
</head>
<body>
<h1>CSS Menu - Vertical</h1>
<hr />
<ul id="navmenu">
<li><a href="#">Blog</a></li>
<li><a href="#">Work +</a>
<ul>
<li><a href="#">Websites +</a>
<ul>
<li><a href="#">qrayg</a></li>
<li><a href="#">qArcade</a></li>
<li><a href="#">qLoM</a></li>
<li><a href="#">qDT</a></li>
</ul>
</li>
<li><a href="#">Pen and Ink</a></li>
<li><a href="#">Free Interfaces</a></li>
</ul>
</li>
<li><a href="#">Learn +</a>
<ul>
<li><a href="#">Fireworks +</a>
<ul>
<li><a href="#">aquaButton</a></li>
<li><a href="#">aquaButton2</a></li>
<li><a href="#">waterDrop</a></li>
<li><a href="#">lightFX</a></li>
<li><a href="#">lightFX2</a></li>
</ul>
</li>
<li><a href="#">CSS +</a>
<ul>
<li><a href="#">footerStick</a></li>
<li><a href="#">spriteNav</a></li>
<li><a href="#">@import</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>


年、月、日三级联动下拉菜单

<html>
<head>
<title>年月日三下拉框联动</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
</head>

<body>
<form name=form1>
<select name=YYYY onchange="YYYYMM(this.value)">
<option value="">请选择 年</option>
</select>
<select name=MM onchange="MMDD(this.value)">
<option value="">选择 月</option>
</select>
<select name=DD>
<option value="">选择 日</option>
</select>
</form>

<script language="JavaScript"><!--
function window.onload()
{
strYYYY = document.form1.YYYY.outerHTML;
strMM = document.form1.MM.outerHTML;
strDD = document.form1.DD.outerHTML;
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

//先给年下拉框赋内容
var y = new Date().getFullYear();
var str = strYYYY.substring(0, strYYYY.length - 9);
for (var i = (y-30); i < (y+30); i++) //以今年为准,前30年,后30年
{
str += "<option value='" + i + "'> " + i + " 年" + "</option>/r/n";
}
document.form1.YYYY.outerHTML = str +"</select>";

//赋月份的下拉框
var str = strMM.substring(0, strMM.length - 9);
for (var i = 1; i < 13; i++)
{
str += "<option value='" + i + "'> " + i + " 月" + "</option>/r/n";
}
document.form1.MM.outerHTML = str +"</select>";

document.form1.YYYY.value = y;
document.form1.MM.value = new Date().getMonth() + 1;
var n = MonHead[new Date().getMonth()];
if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
writeDay(n); //赋日期下拉框
document.form1.DD.value = new Date().getDate();
}
function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
{
var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
if (MMvalue == ""){DD.outerHTML = strDD; return;}
var n = MonHead[MMvalue - 1];
if (MMvalue ==2 && IsPinYear(str)) n++;
writeDay(n)
}
function MMDD(str) //月发生变化时日期联动
{
var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
if (str == ""){DD.outerHTML = strDD; return;}
var n = MonHead[str - 1];
if (str ==2 && IsPinYear(YYYYvalue)) n++;
writeDay(n)
}
function writeDay(n) //据条件写日期的下拉框
{
var s = strDD.substring(0, strDD.length - 9);
for (var i=1; i<(n+1); i++)
s += "<option value='" + i + "'> " + i + " 日" + "</option>/r/n";
document.form1.DD.outerHTML = s +"</select>";
}
function IsPinYear(year)//判断是否闰平年
{ return(0 == year%4 && (year%100 !=0 || year%400 == 0))}
//--></script>
</body>
</html>

三级联动下拉菜单 德仔工作室  您要打印的文件是:三级联动下拉菜单 打印本文


三级联动下拉菜单

作者:佚名 转贴自:本站原创 点击数:764


<SCRIPT LANGUAGE="javascript">
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[3] = "Truck";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Train";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;
arrItems1[6] = "Boat";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarine";
arrItemsGrp1[7] = 2;
arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0
arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1
arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2
arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5
arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3
arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4
arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6
arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7
function selectChange(control, controlToPopulate, ItemArray,
GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--)
controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--)
myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
controlToPopulate.add(myEle) ;
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this,
myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
<option value=3>Air</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice
onchange="selectChange(this, myChoices.thirdChoice, arrItems2,
arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>


区 省 市 三级联动菜单2008年03月24日 星期一 16:28
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三级联动webjx.com</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function CreateSelect(_FormName,_SName,_SValue,_Ds,_AllOptionStr,ShowType)
{
//三级关链菜单通用版
if (_FormName=="")
_FormName = "all"
var _DsArr = _Ds.split("|")
var _Ds1,_Ds2,_Ds3
var _Ds1 = _DsArr[0]
var _Ds2 = (_DsArr.length>1)?_DsArr[1]:_DsArr[0]
var _Ds3 = (_DsArr.length>2)?_DsArr[2]:_DsArr[0]
var _SNameArr = _SName.split("|")
var _SName1,_SName2,_SName3
var _SName1 = _SNameArr[0]
var _SName2 = (_SNameArr.length>1)?_SNameArr[1]:_SNameArr[0]
var _SName3 = (_SNameArr.length>2)?_SNameArr[2]:_SNameArr[0]
var _SValueArr = _SValue.split("|")
var _SValue1,_SValue2,_SValue3
var _SValue1 = _SValueArr[0]
var _SValue2 = (_SValueArr.length>1)?_SValueArr[1]:_SValueArr[0]
var _SValue3 = (_SValueArr.length>2)?_SValueArr[2]:_SValueArr[0]
if (ShowType==3){
_AllOptionStr = _AllOptionStr.replace(//(/(/ig,"/(/("+_Ds3+"/^")
_AllOptionStr = _AllOptionStr.replace(//{/{/ig,"/{/{"+_Ds2+"/(/("+_Ds3+"/*/*")
}
else if(ShowType==2){
_AllOptionStr = _AllOptionStr.replace(//{/{/ig,"/{/{"+_Ds2+"/(/("+_Ds3+"/*/*")
}
else if(ShowType==1){
_AllOptionStr = _AllOptionStr.replace(//(/(/ig,"/(/("+_Ds3+"/^")
}
var AllStr = _Ds1 + "{{"+ _Ds2 + "(("+ _Ds3 +"||"+_AllOptionStr
//alert(AllStr)
var _AR0 = AllStr.split("||");
document.writeln("<select name=/"" + _SName1 + "/" size=/"1/" onChange=/""+_SName1+"redirect(this.options.selectedIndex)/">");
for (var i1 = 0;i1 < _AR0.length;i1++)
{
var Area1Str = _AR0[i1];
var _AR10 = Area1Str.split("{{");
var _AR11 = _AR10[0].split("@");
var Tstr1 = _AR11[0];
var Vstr1 = (_AR11.length==2)?_AR11[1]:_AR11[0]
document.writeln("<option value=/""+Vstr1+"/">"+Tstr1+"<//option>");
}
document.writeln("<//select>");
document.writeln("<select name=/"" + _SName2 + "/" size=/"1/" onChange=/""+_SName1+"redirect1(this.options.selectedIndex)/">");
var _AR111 = _Ds2.split("@");
var Tstr11 = _AR111[0];
var Vstr11 = (_AR111.length==2)?_AR111[1]:_AR111[0];
document.writeln("<option value=/""+Vstr11+"/">"+Tstr11+"<//option>");
document.writeln("<//select>");
document.writeln("<select name=/"" + _SName3 + "/" size=/"1/">");
var _AR222 = _Ds3.split("@");
var Tstr22 = _AR222[0];
var Vstr22 = (_AR222.length==2)?_AR222[1]:_AR222[0];
document.writeln("<option value=/""+Vstr22+"/">"+Tstr22+"<//option>");
document.writeln("<//select>");
document.writeln("<SCRIPT LANGUAGE=/"JavaScript/" defer>");
document.writeln("<!--");
document.writeln("var "+_SName1+"NewAllStr = /""+ AllStr +"/"");
document.writeln("var "+_SName1+"_AR0 = "+_SName1+"NewAllStr.split(/"||/");");
document.writeln("var "+_SName1+"groups=document."+ _FormName +"." + _SName1 + ".options.length;");
document.writeln("var "+_SName1+"group=new Array("+_SName1+"groups)");
document.writeln("for (i=0; i<"+_SName1+"groups; i++){");
document.writeln(" "+_SName1+"group[i]=new Array();");
document.writeln("}");
document.writeln("for (var i1 = 0;i1 < "+_SName1+"_AR0.length;i1++){");
document.writeln(" var Area1Str = "+_SName1+"_AR0[i1];");
document.writeln(" var _AR10 = Area1Str.split(/"{{/");");
document.writeln(" var _AR12 = _AR10[1].split(/"**/");");
document.writeln(" for (var i2 = 0;i2 < _AR12.length;i2++){");
document.writeln(" var Area2Str = _AR12[i2];");
document.writeln(" var _AR20 = Area2Str.split(/"((/");");
document.writeln(" var _AR211 = _AR20[0].split(/"@/");");
document.writeln(" var Tstr2 = _AR211[0];");
document.writeln(" var Vstr2 = (_AR211.length==2)?_AR211[1]:_AR211[0];");
document.writeln(" "+_SName1+"group[i1][i2]=new Option(Tstr2,Vstr2);");
document.writeln(" }");
document.writeln("}");
document.writeln("var "+_SName1+"temp = document."+ _FormName +"." + _SName2);
document.writeln("function "+_SName1+"redirect(x){");
document.writeln(" for (m="+_SName1+"temp.options.length-1;m>0;m--)");
document.writeln(" "+_SName1+"temp.options[m]=null;");
document.writeln(" for (i=0;i<"+_SName1+"group[x].length;i++){");
document.writeln(" "+_SName1+"temp.options[i]=new Option("+_SName1+"group[x][i].text,"+_SName1+"group[x][i].value);");
document.writeln(" }");
document.writeln(" "+_SName1+"temp.options[0].selected=true");
document.writeln(" "+_SName1+"redirect1(0)");
document.writeln("}");
document.writeln("var "+_SName1+"Group2s=document."+ _FormName +"." + _SName2 + ".options.length;");
document.writeln("var "+_SName1+"Group2=new Array("+_SName1+"groups);");
document.writeln("for (i=0; i<"+_SName1+"groups; i++){");
document.writeln(" "+_SName1+"Group2[i]=new Array("+_SName1+"group[i].length)");
document.writeln(" for (j=0; j<"+_SName1+"group[i].length; j++){");
document.writeln(" "+_SName1+"Group2[i][j]=new Array()");
document.writeln(" }");
document.writeln("}");
document.writeln("for (var i1 = 0;i1 < "+_SName1+"_AR0.length;i1++){");
document.writeln(" var Area1Str = "+_SName1+"_AR0[i1]");
document.writeln(" var _AR10 = Area1Str.split(/"{{/");");
document.writeln(" var _AR12 = _AR10[1].split(/"**/");");
document.writeln(" for (var i2 = 0;i2 < _AR12.length;i2++){");
document.writeln(" var Area2Str = _AR12[i2]");
document.writeln(" var _AR20 = Area2Str.split(/"((/");");
document.writeln(" _AR212 = _AR20[1].split(/"^/");");
document.writeln(" for (var i3 = 0;i3 < _AR212.length;i3++){");
document.writeln(" Area3Str = _AR212[i3]");
document.writeln(" _AR3 = Area3Str.split(/"@/");");
document.writeln(" Tstr3 = _AR3[0]");
document.writeln(" Vstr3 = (_AR3.length==2)?_AR3[1]:_AR3[0]");
document.writeln(" "+_SName1+"Group2[i1][i2][i3]=new Option(Tstr3,Vstr3);");
document.writeln(" }");
document.writeln(" }");
document.writeln("}");
document.writeln("var "+_SName1+"temp1=document."+ _FormName +"." + _SName3 + "");
document.writeln("function "+_SName1+"redirect1(y){");
document.writeln(" for (m="+_SName1+"temp1.options.length-1;m>0;m--)");
document.writeln(" "+_SName1+"temp1.options[m]=null");
document.writeln(" for (i=0;i<"+_SName1+"Group2[document."+ _FormName +"." + _SName1 + ".options.selectedIndex][y].length;i++){");
document.writeln(" "+_SName1+"temp1.options[i]=new Option("+_SName1+"Group2[document."+ _FormName +"." + _SName1 + ".options.selectedIndex][y][i].text," + _SName1 + "Group2[document."+ _FormName +"." + _SName1 + ".options.selectedIndex][y][i].value)");
document.writeln(" }");
document.writeln(" "+_SName1+"temp1.options[0].selected=true");
document.writeln("}");
document.writeln("////-->");
document.writeln("<//script>");
document.writeln("<script language=/"JavaScript/">");
document.writeln("<!--");
document.writeln("function "+_SName1+"SetValue(){");
document.writeln(" try{");
document.writeln(" if (/""+_SValue1+"/"!=/"/"){");
document.writeln(" document."+ _FormName +"."+_SName1+".value=/""+_SValue1+"/"");
document.writeln(" "+_SName1+"redirect(document."+ _FormName +"."+_SName1+".options.selectedIndex);");
document.writeln(" if (/""+_SValue2+"/"!=/"/"){");
document.writeln(" document."+ _FormName +"."+_SName2+".value=/""+_SValue2+"/"");
document.writeln(" "+_SName1+"redirect1(document."+ _FormName +"."+_SName2+".options.selectedIndex)");
document.writeln(" if (/""+_SValue3+"/"!=/"/")");
document.writeln(" document."+ _FormName +"."+_SName3+".value=/""+_SValue3+"/"");
document.writeln(" }");
document.writeln(" }");
document.writeln(" }");
document.writeln(" catch(e){");
document.writeln(" }");
document.writeln("}");
document.writeln("window.attachEvent(/"onload/","+_SName1+"SetValue)");
document.writeln("////-->");
document.writeln("<//script>");
}
//-->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var AllStr1 = ""
+"东北地区{{"
+"黑龙江((哈尔滨^齐齐哈尔^牡丹江^佳木斯^大庆^绥化^鹤岗^鸡西^黑河^双鸭山^伊春^七台河^大兴安岭"
+"**吉林((长春^吉林^四平^辽源^通化^白山^松原^白城^延边"
+"**辽宁((沈阳^大连^鞍山^抚顺^本溪^丹东^锦州^营口^阜新^辽阳^盘锦^铁岭^朝阳^葫芦岛"
+"||华北地区{{"
+"北京((东城^西城^崇文^宣武^朝阳^丰台^石景山^海淀^门头沟^房山^通州^顺义^昌平^大兴^平谷^怀柔^密云^延庆"
+"**天津((和平^东丽^河东^西青^河西^津南^南开^北辰^河北^武清^红挢^塘沽^汉沽^大港^宁河^静海^宝坻^蓟县"
+"**山东((济南^青岛^淄博^枣庄^东营^烟台^潍坊^济宁^泰安^威海^日照^莱芜^临沂^德州^聊城^滨州^菏泽"
+"**河北((石家庄^邯郸^邢台^保定^张家口^承德^廊坊^唐山^秦皇岛^沧州^衡水"
+"**河南((郑州^开封^洛阳^平顶山^安阳^鹤壁^新乡^焦作^濮阳^许昌^漯河^三门峡^南阳^商丘^信阳^周口^驻马店^济源"
+"**山西((太原^大同^阳泉^长治^晋城^朔州^吕梁^忻州^晋中^临汾^运城"
+"**内蒙古((呼和浩特^包头^乌海^赤峰^呼伦贝尔盟^阿拉善盟^哲里木盟^兴安盟^乌兰察布盟^锡林郭勒盟^巴彦淖尔盟^伊克昭盟"
+"||华中地区{{"
+"湖北((武汉^宜昌^荆州^襄樊^黄石^荆门^黄冈^十堰^恩施^潜江^天门^仙桃^随州^咸宁^孝感^鄂州"
+"**湖南((长沙^常德^株洲^湘潭^衡阳^岳阳^邵阳^益阳^娄底^怀化^郴州^永州^湘西^张家界"
+"||华南地区{{"
+"广东((广州^深圳^珠海^汕头^东莞^中山^佛山^韶关^江门^湛江^茂名^肇庆^惠州^梅州^汕尾^河源^阳江^清远^潮州^揭阳^云浮"
+"**广西((南宁^柳州^桂林^梧州^北海^防城港^钦州^贵港^玉林^南宁地区^柳州地区^贺州^百色^河池"
+"**福建((福州^厦门^莆田^三明^泉州^漳州^南平^龙岩^宁德"
+"**海南((海口^三亚"
+"||西南地区{{"
+"四川((成都^绵阳^德阳^自贡^攀枝花^广元^内江^乐山^南充^宜宾^广安^达川^雅安^眉山^甘孜^凉山^泸州"
+"**重庆((万州^涪陵^渝中^大渡口^江北^沙坪坝^九龙坡^南岸^北碚^万盛^双挢^渝北^巴南^黔江^长寿^綦江^潼南^铜梁^大足^荣昌^壁山^梁平^城口^丰都^垫江^武隆^忠县^开县^云阳^奉节^巫山^巫溪^石柱^秀山^酉阳^彭水^江津^合川^永川^南川"
+"**贵州((贵阳^六盘水^遵义^安顺^铜仁^黔西南^毕节^黔东南^黔南"
+"**云南((昆明^大理^曲靖^玉溪^昭通^楚雄^红河^文山^思茅^西双版纳^保山^德宏^丽江^怒江^迪庆^临沧"
+"**西藏((拉萨^日喀则^山南^林芝^昌都^阿里^那曲"
+"||西北地区{{"
+"陕西((西安^宝鸡^咸阳^铜川^渭南^延安^榆林^汉中^安康^商洛"
+"**甘肃((兰州^嘉峪关^金昌^白银^天水^酒泉^张掖^武威^定西^陇南^平凉^庆阳^临夏^甘南"
+"**宁夏((银川^石嘴山^吴忠^固原"
+"**青海((西宁^海东^海南^海北^黄南^玉树^果洛^海西"
+"**新疆((乌鲁木齐^石河子^克拉玛依^伊犁^巴音郭勒^昌吉^克孜勒苏柯尔克孜^博尔塔拉^吐鲁番^哈密^喀什^和田^阿克苏"
+"||华东地区{{"
+"上海((黄浦^卢湾^徐汇^长宁^静安^普陀^闸北^虹口^杨浦^闵行^宝山^嘉定^浦东^金山^松江^青浦^南汇^奉贤^崇明"
+"**江苏((南京^镇江^苏州^南通^扬州^盐城^徐州^连云港^常州^无锡^宿迁^泰州^淮安"
+"**浙江((杭州^宁波^温州^嘉兴^湖州^绍兴^金华^衢州^舟山^台州^丽水"
+"**安徽((合肥^芜湖^蚌埠^马鞍山^淮北^铜陵^安庆^黄山^滁州^宿州^池州^淮南^巢湖^阜阳^六安^宣城^亳州"
+"**江西((南昌市^景德镇^九江^鹰潭^萍乡^新馀^赣州^吉安^宜春^抚州^上饶"
+"||港澳台地区{{"
+"香港((香港"
+"**澳门((澳门"
+"**台湾((台北^高雄^台中^台南^屏东^南投^云林^新竹^彰化^苗栗^嘉义^花莲^桃园^宜兰^基隆^台东^金门^马祖^澎湖"
+"||其它地区{{"
+"其它((其它"
//-->
</SCRIPT>
<FORM name="HwForm">
<SCRIPT LANGUAGE="JavaScript">
CreateSelect("HwForm","S_1|S_2|S_3","","请选择地区@|请选择省份@|请选择城市@",AllStr1,3);
</SCRIPT>
</FORM>
</body>
</html>

一个CSS菜单导航
悬赏分:30 - 解决时间:2008-7-22 18:50
http://hi.baidu.com/tayce/blog/item/f3c5efed66728fd2b31cb11d.html

代码在上边的网址里,请高人帮忙修改下右边的数据中心频道,我定位的出来的下拉菜单总是偏的···效果要鼠标滑到数据中心频道时候出来下拉菜单。谢谢~~
提问者: tayce - 见习魔法师 二级 最佳答案
你的代码已经改好。。


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body {
margin:0;
padding:0;}

ul#menu009{
margin:0;
padding:0;
list-style-type:none;
width:auto;
font-size:12px;
height:36px;
font-family:Tahoma, Verdana, Arial, Helvetica;
position:relative;
display:block;
font-weight:bold;
background:url("images/bkg_off.gif") repeat-x left top;
border-bottom:5px solid #ffd379;
border-top:1px solid #0297cf;}

ul#menu009 li{
display:block;
float:left;
margin:0;
padding:0;}

ul#menu009 li a{
display:block;
float:left;
color:#c9f0ff;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
background:url("images/separator.gif") no-repeat right top;}

ul#menu009 li a:hover{
background:url("images/hover.gif") no-repeat right top;}

ul#menu009 li a.current,ul#menu009 li a.current:hover{
color:#fff;
background:url("images/bkg_on.gif") no-repeat right top;}
#place {
color:#fff;
background-color:#c9f0ff;
font-family:Tahoma, Verdana, Arial, Helvetica;
font-size:11px; padding-bottom:3px;}

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
#menu1{
width:130px!important}
#menu1 ul{
list-style:none;
}
#menu1 li {
float:right;
position:relative;
}
#menu1 ul ul {
visibility:hidden;
position:absolute;
left:-40px;
top:30px;

}
#menu1 table{
position:absolute;
left:0;
top:0;
}
#menu1 ul li:hover ul,#menu1 ul a:hover ul{
visibility:visible;
}
#menu1 a{
display:block;
text-align:center;
text-decoration:none;
width:120px;
height:26px;
color:#0080a3;
font-weight:bolder;
line-height:30px;
background:#c9c9a7;
background-image: url(images/menu-right.gif);
background-repeat: no-repeat;
}
#menu1 a:hover{
display:block;
text-align:center;
text-decoration:underline;
width:120px;
height:26px;
color:#ff8500;
font-weight:bolder;
line-height:30px;
background:#c9c9a7;
background-image: url(images/menu-right.gif);
background-repeat: no-repeat;
}
#menu1 ul ul li {
clear:both;
text-align:left;
}
#menu1 ul ul li a{
display:block;
width:120px;
height:30px;
background:#bbe8ef;
color:#000;
}
#menu1 ul ul li a:hover{
background:#20c3d9;
color:#000;
}
body,td,th {
font-size: 12px;
}
</style>
</head>

<body>


<div align="center">
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="742"><ul id="menu009">
<li><a href="domain_reg.html" class="current">域名注册</a></li>
<li><a href="#">虚拟主机</a></li>
<li><a href="#">VPS</a></li>
<li><a href="#">独立主机</a></li>
<li><a href="#">企业邮箱</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">优惠套餐</a></li>
<li><a href="#">周边产品</a></li>
</ul></td>
<td width="154" background="images/menu-bj.gif"><div id="menu1" background-repeat: repeat-x;>
<ul>
<li> <a href="#">数据中心频道
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="#" title="虚拟主机"> 京西数据中心</a></li>
<li><a href="#" title="虚拟主机"> 京东网通数据中心</a></li>
<li><a href="#" title="虚拟主机"> 中关村数据中心</a></li>
<li><a href="#" title="虚拟主机"> 铁通集团数据中心</a></li>
<li><a href="#" title="虚拟主机"> 电信数据中心</a></li>
<li><a href="#" title="虚拟主机"> IDC托管解决方案</a></li>
<li><a href="#"
title="IDC转售扶持计划">IDC转售扶持计划</a></li>
<li><a href="#" title="专线接入"> 专线接入</a></li>
<li><a href="#" title="资源状况"> 资源状况</a></li>
<li><a href="#" title="商务合作"> 商务合作</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
</ul>
</div></td>
<td width="5" background="images/menu-bj.gif"> </td>
</tr>
</table>
</div>
</body>
</html>

DIV CSS制作的个性水平导航菜单实例2008-09-12 22:35先看下效果:


CSS样式代码:

以下为引用的内容:
#pointermenu{
border-top: 7px solid black; /*optional border across top*/
margin: 0;
padding: 0;
}

#pointermenu ul{
margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 10px;
font: 12px 宋体;
background-color: black;
background: black url(../images/leftround.gif) bottom left no-repeat; /*optional left round corner*/
}

* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/
}

#pointermenu ul li{
display: inline;
}


#pointermenu ul li a{
float: left;
color: white;
font-weight: ;
padding: 2px 11px 7px 7px;
text-decoration: none;
background: url(../images/bbbbb.gif) bottom center no-repeat;
}

#pointermenu ul li a:visited{
color: white;
}


#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
color: white;
background-color: darkred;
}

#pointermenu ul li a#rightcorner{
padding-right: 0;
padding-left: 8px;
background: url(../images/rightround.gif) bottom right no-repeat; /*optional right round corner*/
}



HTML完整

以下为引用的内容:

<!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" lang="gb2312" xml:lang="gb2312">
<head>
<title>站酷CSS代码演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css/css.css" _fcksavedurl=""css/css.css"" _fcksavedurl=""css/css.css"" _fcksavedurl=""css/css.css"" />
</head>

<body>

<div id="pointermenu">
<ul>
<li><a href="#">主 页</a></li>
<li><a href="#">自定菜单</a></li>
<li><a href="#" id="selected">自定菜单</a></li>
<li><a href="#">自定菜单</a></li>
<li><a href="#">自定菜单</a></li>
<li><a href="#">自定菜单</a></li>
<li><a href="#">自定菜单</a></li>
<li><a href="#" id="rightcorner"> </a></li>
</ul>
</div>
<br style="clear: left" />
</body>

</html>


高手们!!!怎么制作网站 的下拉式导航条???
悬赏分:20 - 解决时间:2007-6-28 23:53
网站的下拉式导航条好看,怎么制作呢 ??
能不能知道小弟以下,谢谢 啦!!! 嘿嘿尽量详细点吧!!
提问者: 懒得动弹 - 见习魔法师 二级 最佳答案
用CSS巧制微软下拉式导航条
(作者:touch8 2002年02月20日 09:17)


去过微软中国站点(http://www.microsoft.com/china)的朋友都会对它的下拉菜单式导航条感兴趣,微软的制作方法比较复杂,不是一般菜鸟能学会的,于是就有很多人想出各种办法模拟制作,可是不是要用到很多层就是要用到脚本,感觉还是挺麻烦。我的做法可就简单多了,而且效果不错,看看本文抬头的导航条,再和微软站点的比较一下,怎么样?是不是几乎一模一样?你只要会点html和CSS的一些基本知识就能做到,具体的方法如下:

第一步:

为链接建立样式,代码如下:


a:visited{color:white}
a:link{color:white}
a:active{color:white}
a:hover{color:red }

说明:除了hover是红色外,其他都是白色,和微软一致。

第二步:

建立一个表格,以便放菜单内容,如建立一个3行1列的表格如下:

说明:表格参数均为0,即border="0" cellpadding="0" cellspacing="0" 这里为了解释方便所以留了边框。

第三步:

将菜单内容添入表格并加上链接,如下:


主页
微软中国
美国总部

第四步:

下面我们要建立样式了,首先建立一个名为close的样式,代码如下:

.close{visibility:hidden;background:#6699ff;height:23px;
color:white;font:9pt;text-align:center}

说明:使用hidden属性,说白了就是什么也看不到了!

再来建立一个样式名为open,代码如下:

.open{visibility:visible;background:#6699ff;height:23px;
color:white;font:9pt;text-align:center}

说明:背景采用天蓝色,字体为9pt,和微软保持一致,使用visible属性,即可见。

第五步:

既然样式已经建好了,我们就来调用,代码如下:

<table width="100" border="0" cellpadding="0" cellspacing="0"class=close>
<tr>
<td class=open><a href="#">主页</a></td>
</tr>
<tr>
<td><a href="#">微软中国</a></td>
</tr>
<tr>
<td><a href="#">美国总部</a></td>
</tr>
</table>

说明:整个表格采用close样式,而“主页”单元格采用open样式,充分利用CSS优先权的规则,所产生的效果是只能看到“主页”这个单元格。

第六步:

这是关键的一步,用行为调用样式,代码如下:

<table width="100" class=close onMouseOut="this.style.visibility='hidden'"
onMouseOver="this.style.visibility='visible '"
cellpadding="0" cellspacing="0" border="0" >
<tr>
<td class=open> <a href="#">主页</a></td>
</tr>
<tr>
<td><a href="#">微软中国</a></td>
</tr>
<tr>
<td><a href="#">美国总部</a></td>
</tr>
</table>

说明:当mouseover即鼠标移上时,表格变为可见,而当onmouseout即鼠标移开时,表格恢复不可见样式。

最后一步:

一个下拉菜单已经做好了,现在建立一个1x8的表格,再把下拉菜单插到各个单元格里面,最后把这个大的表格放到一个层里(这样容易定位),大功告成!

为了方便你学习,下面是本菜单式导航条的全部代码,你可以把代码拷贝到记事本里,保存为一个txt文件,然后将这个文件的扩展名由.txt改为.htm,就可以直接用IE打开了。


<html>
<head>
<title>用CSS做下拉式菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body{margin-top:50}
.td{font:9pt;color:green}
a:visited{color:white}
a:link{color:white}
a:active{color:white}
a:hover{color:red }
..close{visibility:hidden;background:#6699ff;
height:23px;color:white;font:9pt;text-align:center}
..open{visibility:visible;background:#6699ff;
height:23px;color:white;font:9pt;text-align:center}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" >
<div id="Layer1" style="position:absolute;
left:4px; top:4px; width:1000px; height:108px;
z-index:1">
<table width="100%" border="0" align="center"
cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
a.style.height='23'" onMouseOver="this.style.
visibility='visible';
a.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=a class=open > <a href="#">主页</a>
|</td>
</tr>
<tr >
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">微软中国</a></td>
</tr>
<tr>
<td><a href="#">美国总部</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
b.style.height='23'" onMouseOver="this.style.
visibility='visible';
b.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=b class="open"><a href="#">活动与培训</a> | </td>
</tr>
<tr >
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">在线讲座</a></td>
</tr>
<tr>
<td ><a href="#">任证与培训 </a></td>
</tr>
<tr>
<td ><a href="#">微软出版社</a></td>
</tr>
<tr>
<td > </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
c.style.height='23'" onMouseOver="this.style.
visibility='visible';
c.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=c class=open><a href="#">定阅电子期刊
</a>|</td>
</tr>
<tr >
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">订阅</a></td>
</tr>
<tr>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
d.style.height='23'" onMouseOver="this.style.
visibility='visible';
d.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=d class=open><a href="#">微软中国</a>
|</td>
</tr>
<tr>
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">新闻</a></td>
</tr>
<tr>
<td><a href="#">动态传真</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%"class=open cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td ><a href="#">微软总部
</a> |</td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
e.style.height='23'" onMouseOver="this.style.
visibility='visible';
e.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=e class=open><a href="#">购买与许可
</a>|</td>
</tr>
<tr>
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">版权与许可</a></td>
</tr>
<tr>
<td><a href="#">购买指南</a></td>
</tr>
<tr>
<td><a href="#">我用正版</a></td>
</tr>
<tr>
<td><a href="#">商标指南</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=close onMouseOut="this.style.visibility='hidden' ;
f.style.height='23'" onMouseOver="this.style.
visibility='visible';
f.style.height='21'" cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td id=f class=open><a href="#">站点地图 </a>|</td>
</tr>
<tr>
<td bgcolor=white></td>
</tr>
<tr>
<td><a href="#">站点内幕</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td valign="top" width="12%">
<table width="100%" class=open cellpadding="0"
cellspacing="0" border="0" >
<tr>
<td ><a href="#">招贤纳士 </a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div align="left"> </div>
</body>
</html>

仿DOS窗口的HTM代码
日期:2003年7月4日 作者:清风网络学院 查看:[大字体 中字体 小字体]

<STYLE>BODY {

FONT-SIZE: 10pt; CURSOR: default; COLOR: rgb(160,160,160); FONT-FAMILY: Fixedsys; BACKGROUND-COLOR: black;scroll=no

}

A {

FONT-SIZE: 10pt; CURSOR: default; COLOR: rgb(160,160,160); FONT-FAMILY: Fixedsys; BACKGROUND-COLOR: black; TEXT-DECORATION: none

}

A:hover {

TEXT-DECORATION: underline overline

}

.input {

BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 10pt; BORDER-BOTTOM-COLOR: rgb(0,0,0); CURSOR: text; COLOR: rgb(160,160,160); FONT-FAMILY: Fixedsys; BACKGROUND-COLOR: black; BORDER-RIGHT-WIDTH: 0px

}

</STYLE>

<OBJECT id=closes type=application/x-oleobject

classid=clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11><PARAM NAME="Command" VALUE="Close"></OBJECT>

<script>

function getfocus(){

document.shuru.dos.focus()

if(event.keyCode==13){

judge();

document.shuru.dos.blur();}

}

document.onkeydown=getfocus;

</script>

<SCRIPT language=javascript>

var ttime=0,tip='_',zhi

function flash(){

ttime++

if(ttime%2==1){

tip=''

var gett=document.shuru.dos.value

var len=gett.length;

document.shuru.dos.value=gett.substring(0,len-1)+tip}

else{

tip='_'

document.shuru.dos.value=document.shuru.dos.value+tip}

if(ttime>100)

ttime=0

zhi=setTimeout("flash()",200)

}

function shutdown(){

window.open('http://www.nbacn.com')

closes.Click()

}

function errorcommand(){

document.shuru.dos.value='Bad command or file name '
}

function cls(){

word.style.display="none"}

function helpyou(){

word.style.display=""}

function win(){

alert('正在制做中请期待......')}

function txt(){

alert('正在制做中请期待......')}

function dhtml(){alert('正在制做中请期待......')}

function search(){

var dosearch=prompt("请输入你所要查询的qq号",'')

var doit="http://search.tencent.com/cgi-bin/friend/user_show_info?ln="+dosearch;

window.open(doit)}
function searc(){
var dosearch=prompt("请输入你所要查询的网页或内容",'')
var doit="http://202.98.123.184/cns.dll?fw=cm2&name="+dosearch;
window.open(doit)}

function judge(){

var menu=document.shuru.dos.value;

if(menu=='exit')

shutdown()

else if(menu=='im286')

helpyou()

else if(menu=='cls')

cls()

else if(menu=='win')

win()

else if(menu=='txt')

txt()

else if(menu=='dhtml')

dhtml()
else if(menu=='dll')


searc()


else if(menu=='qq')

search()

else

errorcommand()

}

</SCRIPT>

<script language="JavaScript">

<!--

function MM_popupMsg(msg) { //v1.0

alert(msg);

}

//-->

</script>

<BODY onload=flash()><BR>

<DIV id=""

style="WIDTH: 760px; POSITION: absolute">www.NBAcn.com(R)&nbsp;personal&nbsp;webpage dos<BR>&nbsp;&nbsp;(C)Copyright&copy;LCX&nbsp;<script language="JavaScript1.2" src="1.js" type="text/javascript"></script>

<BR><BR>

<DIV id=word

style="DISPLAY: none">

C:/Webpages>dir&nbsp;←<br><br>我的主页(篮球、NBA中国)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WIN&nbsp;&nbsp;&nbsp; 01-3-2&nbsp;&nbsp;http://bbs3.topww.com<br>我的篮球论坛(NBA)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EXIT&nbsp;&nbsp;&nbsp;02-1-12&nbsp;http://www.nbacn.com<br>
<br>dir&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;显示本网站目录

&nbsp;&nbsp;<BR>win&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;进入窗口界面,网易主页有更多内容

&nbsp;&nbsp;<BR>exit&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表示退出本页进入本站论坛&nbsp;&nbsp;<BR>cls&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表示清屏关闭目录显示&nbsp;<BR>txt&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的几篇发在杂志上的散文&nbsp;<BR>dhtml&nbsp;&nbsp;&nbsp;&nbsp;动态html版更酷代替网易旧版界面<BR>
qq&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 表示qq好友资料搜索<BR>
dll&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表示3721网址搜索<BR>

</DIV>

<FORM name=shuru action=javascript:judge()>C:/WWW.haiyangtop.TK><INPUT class=input

onblur=flash() onfocus="this.value='';clearTimeout(zhi)" size=60

value=" " name=dos title="用鼠标点后键入dir回车"> <INPUT style="DISPLAY: none" type=submit value=submit hidden>

</FORM></DIV></BODY>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics