省市联级菜单--js+html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title></title>
  5 </head>
  6 <body>
  7 <script language=javascript>
  8
  9 cities = new Object();
 10
 11 cities[‘台湾‘]=new Array(‘台北‘,‘台南‘,‘其他‘);
 12
 13 cities[‘马来西亚‘]=new Array(‘Malaysia‘);
 14
 15 cities[‘北京‘]=new Array(‘北京‘);
 16
 17 cities[‘上海‘]=new Array(‘上海‘);
 18
 19 cities[‘天津‘]=new Array(‘天津‘);
 20
 21 cities[‘重庆‘]=new Array(‘重庆‘);
 22
 23 cities[‘河北省‘]=new Array(‘石家庄‘, ‘张家口‘, ‘承德‘, ‘秦皇岛‘, ‘唐山‘, ‘廊坊‘, ‘保定‘, ‘沧州‘, ‘衡水‘, ‘邢台‘, ‘邯郸‘);
 24
 25 cities[‘山西省‘]=new Array(‘太原‘, ‘大同‘, ‘朔州‘, ‘阳泉‘, ‘长治‘, ‘晋城‘, ‘忻州‘, ‘吕梁‘, ‘晋中‘, ‘临汾‘, ‘运城‘);
 26
 27 cities[‘辽宁省‘]=new Array(‘沈阳‘, ‘朝阳‘, ‘阜新‘, ‘铁岭‘, ‘抚顺‘, ‘本溪‘, ‘辽阳‘, ‘鞍山‘, ‘丹东‘, ‘大连‘, ‘营口‘, ‘盘锦‘, ‘锦州‘, ‘葫芦岛‘);
 28
 29 cities[‘吉林省‘]=new Array(‘长春‘, ‘白城‘, ‘松原‘, ‘吉林‘, ‘四平‘, ‘辽源‘, ‘通化‘, ‘白山‘, ‘延边‘);
 30
 31 cities[‘黑龙江省‘]=new Array(‘哈尔滨‘, ‘齐齐哈尔‘, ‘黑河‘, ‘大庆‘, ‘伊春‘, ‘鹤岗‘, ‘佳木斯‘, ‘双鸭山‘, ‘七台河‘, ‘鸡西‘, ‘牡丹江‘, ‘绥化‘, ‘大兴安‘);
 32
 33 cities[‘江苏省‘]=new Array(‘南京‘, ‘徐州‘, ‘连云港‘, ‘宿迁‘, ‘淮阴‘, ‘盐城‘, ‘扬州‘, ‘泰州‘, ‘南通‘, ‘镇江‘, ‘常州‘, ‘无锡‘, ‘苏州‘);
 34
 35 cities[‘浙江省‘]=new Array(‘杭州‘, ‘湖州‘, ‘嘉兴‘, ‘舟山‘, ‘宁波‘, ‘绍兴‘, ‘金华‘, ‘台州‘, ‘温州‘, ‘丽水‘);
 36
 37 cities[‘安徽省‘]=new Array(‘合肥‘, ‘宿州‘, ‘淮北‘, ‘阜阳‘, ‘蚌埠‘, ‘淮南‘, ‘滁州‘, ‘马鞍山‘, ‘芜湖‘, ‘铜陵‘, ‘安庆‘, ‘黄山‘, ‘六安‘, ‘巢湖‘, ‘池州‘, ‘宣城‘);
 38
 39 cities[‘福建省‘]=new Array(‘福州‘, ‘南平‘, ‘三明‘, ‘莆田‘, ‘泉州‘, ‘厦门‘, ‘漳州‘, ‘龙岩‘, ‘宁德‘);
 40
 41 cities[‘江西省‘]=new Array(‘南昌‘, ‘九江‘, ‘景德镇‘, ‘鹰潭‘, ‘新余‘, ‘萍乡‘, ‘赣州‘, ‘上饶‘, ‘抚州‘, ‘宜春‘, ‘吉安‘);
 42
 43 cities[‘山东省‘]=new Array(‘济南‘, ‘聊城‘, ‘德州‘, ‘东营‘, ‘淄博‘, ‘潍坊‘, ‘烟台‘, ‘威海‘, ‘青岛‘, ‘日照‘, ‘临沂‘, ‘枣庄‘, ‘济宁‘, ‘泰安‘, ‘莱芜‘, ‘滨州‘, ‘菏泽‘);
 44
 45 cities[‘河南省‘]=new Array(‘郑州‘, ‘三门峡‘, ‘洛阳‘, ‘焦作‘, ‘新乡‘, ‘鹤壁‘, ‘安阳‘, ‘濮阳‘, ‘开封‘, ‘商丘‘, ‘许昌‘, ‘漯河‘, ‘平顶山‘, ‘南阳‘, ‘信阳‘, ‘周口‘, ‘驻马店‘);
 46
 47 cities[‘湖北省‘]=new Array(‘武汉‘, ‘十堰‘, ‘襄攀‘, ‘荆门‘, ‘孝感‘, ‘黄冈‘, ‘鄂州‘, ‘黄石‘, ‘咸宁‘, ‘荆州‘, ‘宜昌‘, ‘恩施‘, ‘襄樊‘);
 48
 49 cities[‘湖南省‘]=new Array(‘长沙‘, ‘张家界‘, ‘常德‘, ‘益阳‘, ‘岳阳‘, ‘株洲‘, ‘湘潭‘, ‘衡阳‘, ‘郴州‘, ‘永州‘, ‘邵阳‘, ‘怀化‘, ‘娄底‘, ‘湘西‘);
 50
 51 cities[‘广东省‘]=new Array(‘广州‘, ‘清远‘, ‘韶关‘, ‘河源‘, ‘梅州‘, ‘潮州‘, ‘汕头‘, ‘揭阳‘, ‘汕尾‘, ‘惠州‘, ‘东莞‘, ‘深圳‘, ‘珠海‘, ‘江门‘, ‘佛山‘, ‘肇庆‘, ‘云浮‘, ‘阳江‘, ‘茂名‘, ‘湛江‘);
 52
 53 cities[‘海南省‘]=new Array(‘海口‘, ‘三亚‘);
 54
 55 cities[‘四川省‘]=new Array(‘成都‘, ‘广元‘, ‘绵阳‘, ‘德阳‘, ‘南充‘, ‘广安‘, ‘遂宁‘, ‘内江‘, ‘乐山‘, ‘自贡‘, ‘泸州‘, ‘宜宾‘, ‘攀枝花‘, ‘巴中‘, ‘达川‘, ‘资阳‘, ‘眉山‘, ‘雅安‘, ‘阿坝‘, ‘甘孜‘, ‘凉山‘);
 56
 57 cities[‘贵州省‘]=new Array(‘贵阳‘, ‘六盘水‘, ‘遵义‘, ‘毕节‘, ‘铜仁‘, ‘安顺‘, ‘黔东南‘, ‘黔南‘, ‘黔西南‘);
 58
 59 cities[‘云南省‘]=new Array(‘昆明‘, ‘曲靖‘, ‘玉溪‘, ‘丽江‘, ‘昭通‘, ‘思茅‘, ‘临沧‘, ‘保山‘, ‘德宏‘, ‘怒江‘, ‘迪庆‘, ‘大理‘, ‘楚雄‘, ‘红河‘, ‘文山‘, ‘西双版纳‘);
 60
 61 cities[‘陕西省‘]=new Array(‘西安‘, ‘延安‘, ‘铜川‘, ‘渭南‘, ‘咸阳‘, ‘宝鸡‘, ‘汉中‘, ‘榆林‘, ‘商洛‘, ‘安康‘);
 62
 63 cities[‘甘肃省‘]=new Array(‘兰州‘, ‘嘉峪关‘, ‘金昌‘, ‘白银‘, ‘天水‘, ‘酒泉‘, ‘张掖‘, ‘武威‘, ‘庆阳‘, ‘平凉‘, ‘定西‘, ‘陇南‘, ‘临夏‘, ‘甘南‘);
 64
 65 cities[‘青海省‘]=new Array(‘西宁‘, ‘海东‘, ‘西宁‘, ‘海北‘, ‘海南‘, ‘黄南‘, ‘果洛‘, ‘玉树‘, ‘海西‘);
 66
 67 cities[‘内蒙古‘]=new Array(‘呼和浩特‘, ‘包头‘, ‘乌海‘, ‘赤峰‘, ‘呼伦贝尔盟‘, ‘兴安盟‘, ‘哲里木盟‘, ‘锡林郭勒盟‘, ‘乌兰察布盟‘, ‘鄂尔多斯‘, ‘巴彦淖尔盟‘, ‘阿拉善盟‘);
 68
 69 cities[‘广西‘]=new Array(‘南宁‘, ‘桂林‘, ‘柳州‘, ‘梧州‘, ‘贵港‘, ‘玉林‘, ‘钦州‘, ‘北海‘, ‘防城港‘, ‘南宁‘, ‘百色‘, ‘河池‘, ‘柳州‘, ‘贺州‘);
 70
 71 cities[‘西藏‘]=new Array(‘拉萨‘, ‘那曲‘, ‘昌都‘, ‘林芝‘, ‘山南‘, ‘日喀则‘, ‘阿里‘);
 72
 73 cities[‘宁夏‘]=new Array(‘银川‘, ‘石嘴山‘, ‘吴忠‘, ‘固原‘);
 74
 75 cities[‘新疆‘]=new Array(‘乌鲁木齐‘, ‘克拉玛依‘, ‘喀什‘, ‘阿克苏‘, ‘和田‘, ‘吐鲁番‘, ‘哈密‘, ‘博尔塔拉‘, ‘昌吉‘, ‘巴音郭楞‘, ‘伊犁‘, ‘塔城‘, ‘阿勒泰‘);
 76
 77 cities[‘香港‘]=new Array(‘香港‘);
 78
 79 cities[‘澳门‘]=new Array(‘澳门‘);
 80
 81 function set_city(province, city)
 82
 83 {
 84
 85 var pv, cv;
 86
 87 var i, ii;
 88
 89 pv=province.value;
 90
 91 cv=city.value;
 92
 93 city.length=1;
 94
 95 if(pv==‘0‘) return;
 96
 97 if(typeof(cities[pv])==‘undefined‘) return;
 98
 99 for(i=0; i<cities[pv].length; i++)
100
101 {
102
103 ii = i+1;
104
105 city.options[ii] = new Option();
106
107 city.options[ii].text = cities[pv][i];
108
109 city.options[ii].value = cities[pv][i];
110
111 }
112
113 }
114
115 </script>
116
117 <SELECT name="sheng" id="to_cn" onchange="set_city(this, document.getElementById(‘city‘)); WYL();" class=login_text_input >
118
119 <option value=0>请选择</option>
120
121 <option value=台湾>台湾</option>
122
123 <option value=马来西亚>马来西亚</option>
124
125 <option value=北京>北京</option>
126
127 <option value=上海>上海</option>
128
129 <option value=天津>天津</option>
130
131 <option value=重庆>重庆</option>
132
133 <option value=河北省>河北省</option>
134
135 <option value=山西省>山西省</option>
136
137 <option value=辽宁省>辽宁省</option>
138
139 <option value=吉林省>吉林省</option>
140
141 <option value=黑龙江省>黑龙江省</option>
142
143 <option value=江苏省>江苏省</option>
144
145 <option value=浙江省>浙江省</option>
146
147 <option value=安徽省>安徽省</option>
148
149 <option value=福建省>福建省</option>
150
151 <option value=江西省>江西省</option>
152
153 <option value=山东省>山东省</option>
154
155 <option value=河南省>河南省</option>
156
157 <option value=湖北省>湖北省</option>
158
159 <option value=湖南省>湖南省</option>
160
161 <option value=广东省>广东省</option>
162
163 <option value=海南省>海南省</option>
164
165 <option value=四川省>四川省</option>
166
167 <option value=贵州省>贵州省</option>
168
169 <option value=云南省>云南省</option>
170
171 <option value=陕西省>陕西省</option>
172
173 <option value=甘肃省>甘肃省</option>
174
175 <option value=青海省>青海省</option>
176
177 <option value=内蒙古>内蒙古</option>
178
179 <option value=广西>广西</option>
180
181 <option value=西藏>西藏</option>
182
183 <option value=宁夏>宁夏</option>
184
185 <option value=新疆>新疆</option>
186
187 <option value=香港>香港</option>
188
189 <option value=澳门>澳门</option>
190 </SELECT>
191 <select id="city" class=login_text_input name="shi">
192
193 <option value=0>请选择</option> 市
194
195 </select>
196 </body>
197 </html>
时间: 2024-11-05 04:48:18

省市联级菜单--js+html的相关文章

学习笔记-php简单联级下拉菜单输出-2016.4.7

在使用联级输出的时候一到一个模型里面的小问题,之前不注意,模型里不同的方法每次得到的数据交给控制器的时候,我都以数组的形式输出,但是这个数组我作为私有字段,到时今天做联级菜单输出的时候,不能正常输出,最后不得不吧这个私有字段去掉,在每个方法的作用域里面分别初始化一个数组,这样就互不干扰!(还是考虑的太少,太异想天开!) 不说了,贴代码 html部分 <select name="nav"> <option>请选择一个栏目类别</option> {$na

当easydropdown.js 遇到3联级

在最近的项目中,因为涉及到下拉菜单美化,我们用到了easydropdown.js 下拉菜单美化插件,但是这个下拉菜单同时还要做3联级,那么问题就来了,网上资料比较少,我们通过easydropdown已有的方法进行测试,最终得出了解决方案 /*三级联动*/ $('#dd1′).change(function(){ $('#dd2′).html('<option>xxxx</option>');//销毁 $('#dd2′).easyDropDown('destroy'); //重新美化

原生JS实现N级菜单

需求分析 简单的分析一下,要实现N级菜单,首先从布局入手,即判断是否有下级菜单 没有下一级菜单,直接排列 有下级菜单,又分为下级菜单排放位置,和在上级菜单显示类似 '>' 的符号,效果如图: 图:1 初步实现 1.实现是否存在   > 注意: 下面凡是担忧 xxx===yyy ? xxx : xxx都是利用三元表达式,来表达思路. HTML结构如下: 图:2 要实现图一的效果,我们只需要判断li标签里面的children.length===2 ? 'span存在' : 'span移除' 2.下

【锋利的JQuery-学习笔记】菜单栏及其2级菜单

效果图: 鼠标移动到菜单项后如下: html: <div id="nav" class="mainNav"> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">品 牌</a> <div class="jnNav&

什么是块级元素和内联级元素(二)

block(块)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度. ④它可以容纳内联元素和其他块元素   inline元素的特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 (中文叫法有多种内联元素.内嵌元素.行内元素.直进式元素). 块元素(block element)和内联元素(inline element)都是

DIV+CSS布局重新学习之css控制ul li实现2级菜单

<!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-

[伪] 级联菜单,两级菜单

[伪] 级联菜单,两级菜单 这段时间需要做一个类似效果的一个菜单样式,所以就查了各种文档,各种百度各种搜索,的确也是搜到了不少的第三方组件,比如(CascadingMenuViewLib)就是其中一个,但是,我脑子笨,研究了3天左右的时间,改不成我需要得样子,So...我用我自己的方式,实现了这个效果(对了,还没有完全实现,因为TextView被点中的样式我还没有设置,不过这都是小事情了..) 在这里,我提供一个思路,代码很简单,当然,我也会附一些上来,好的,我首先说一下思路 首先,我们的xml

3级菜单

<html> <head> <title></title> <meta charset="utf-8"> <style> *{ margin:0; padding:0; } ul{ list-style: none; } body{ background: #f5f5f5; font-family: "Microsoft YaHei"; font-size: 12px; } .wrap{ wid

MFC 对话框中动态创建N级菜单以及响应事件

创建一个基于对话框的工程,工程名为CreateMenu 为该对话框增加一个文件菜单项和测试菜单项,如下图所示   测试菜单项至少要有一个子菜单项 在对话框属性中关联该菜单 在resource.h中增加一个ID_TESTMENU宏 #define ID_TESTMENU          5000 在对话框中添加一个Button按钮,建立消息映射,编辑代码如下 void CCreateMenuDlg::OnButton1() { // TODO: Add your control notifica