`

JS省市二级联动网页特效菜单

    博客分类:
  • js
阅读更多
<html> 
<head>  
<title>-www.51windows.Net</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style> 
<!-- 
body         { font-size: 14px } 
--> 
</style> 
</head> 
<body bgcolor=#FFFFFF alink=#333333 vlink=#333333 link=#333333 topmargin=0 leftmargin=0> 

<form action="http://www.chinaleader.com/cgi-bin/register.cgi" method=post name="creator" enctype="multipart/form-data"> 

<script language="javascript"> 
<!-- 
var where = new Array(35);  
function comefrom(loca,locacity) { this.loca = loca; this.locacity = locacity; }  
where[0]= new comefrom("请选择省份名","请选择城市名"); 
where[1] = new comefrom("北京","|东城|西城|崇文|宣武|朝阳|丰台|石景山|海淀|门头沟|房山|通州|顺义|昌平|大兴|平谷|怀柔|密云|延庆");  
where[2] = new comefrom("上海","|黄浦|卢湾|徐汇|长宁|静安|普陀|闸北|虹口|杨浦|闵行|宝山|嘉定|浦东|金山|松江|青浦|南汇|奉贤|崇明");  
where[3] = new comefrom("天津","|和平|东丽|河东|西青|河西|津南|南开|北辰|河北|武清|红挢|塘沽|汉沽|大港|宁河|静海|宝坻|蓟县");  
where[4] = new comefrom("重庆","|万州|涪陵|渝中|大渡口|江北|沙坪坝|九龙坡|南岸|北碚|万盛|双挢|渝北|巴南|黔江|长寿|綦江|潼南|铜梁|大足|荣昌|壁山|梁平|城口|丰都|垫江|武隆|忠县|开县|云阳|奉节|巫山|巫溪|石柱|秀山|酉阳|彭水|江津|合川|永川|南川");  
where[5] = new comefrom("河北","|石家庄|邯郸|邢台|保定|张家口|承德|廊坊|唐山|秦皇岛|沧州|衡水");  
where[6] = new comefrom("山西","|太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城");  
where[7] = new comefrom("内蒙古","|呼和浩特|包头|乌海|赤峰|呼伦贝尔盟|阿拉善盟|哲里木盟|兴安盟|乌兰察布盟|锡林郭勒盟|巴彦淖尔盟|伊克昭盟");  
where[8] = new comefrom("辽宁","|沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口|阜新|辽阳|盘锦|铁岭|朝阳|葫芦岛");  
where[9] = new comefrom("吉林","|长春|吉林|四平|辽源|通化|白山|松原|白城|延边");  
where[10] = new comefrom("黑龙江","|哈尔滨|齐齐哈尔|牡丹江|佳木斯|大庆|绥化|鹤岗|鸡西|黑河|双鸭山|伊春|七台河|大兴安岭");  
where[11] = new comefrom("江苏","|南京|镇江|苏州|南通|扬州|盐城|徐州|连云港|常州|无锡|宿迁|泰州|淮安");  
where[12] = new comefrom("浙江","|杭州|宁波|温州|嘉兴|湖州|绍兴|金华|衢州|舟山|台州|丽水");  
where[13] = new comefrom("安徽","|合肥|芜湖|蚌埠|马鞍山|淮北|铜陵|安庆|黄山|滁州|宿州|池州|淮南|巢湖|阜阳|六安|宣城|亳州");  
where[14] = new comefrom("福建","|福州|厦门|莆田|三明|泉州|漳州|南平|龙岩|宁德");  
where[15] = new comefrom("江西","|南昌市|景德镇|九江|鹰潭|萍乡|新馀|赣州|吉安|宜春|抚州|上饶");  
where[16] = new comefrom("山东","|济南|青岛|淄博|枣庄|东营|烟台|潍坊|济宁|泰安|威海|日照|莱芜|临沂|德州|聊城|滨州|菏泽");  
where[17] = new comefrom("河南","|郑州|开封|洛阳|平顶山|安阳|鹤壁|新乡|焦作|濮阳|许昌|漯河|三门峡|南阳|商丘|信阳|周口|驻马店|济源");  
where[18] = new comefrom("湖北","|武汉|宜昌|荆州|襄樊|黄石|荆门|黄冈|十堰|恩施|潜江|天门|仙桃|随州|咸宁|孝感|鄂州"); 
where[19] = new comefrom("湖南","|长沙|常德|株洲|湘潭|衡阳|岳阳|邵阳|益阳|娄底|怀化|郴州|永州|湘西|张家界");  
where[20] = new comefrom("广东","|广州|深圳|珠海|汕头|东莞|中山|佛山|韶关|江门|湛江|茂名|肇庆|惠州|梅州|汕尾|河源|阳江|清远|潮州|揭阳|云浮");  
where[21] = new comefrom("广西","|南宁|柳州|桂林|梧州|北海|防城港|钦州|贵港|玉林|南宁地区|柳州地区|贺州|百色|河池");  
where[22] = new comefrom("海南","|海口|三亚");  
where[23] = new comefrom("四川","|成都|绵阳|德阳|自贡|攀枝花|广元|内江|乐山|南充|宜宾|广安|达川|雅安|眉山|甘孜|凉山|泸州");  
where[24] = new comefrom("贵州","|贵阳|六盘水|遵义|安顺|铜仁|黔西南|毕节|黔东南|黔南");  
where[25] = new comefrom("云南","|昆明|大理|曲靖|玉溪|昭通|楚雄|红河|文山|思茅|西双版纳|保山|德宏|丽江|怒江|迪庆|临沧"); 
where[26] = new comefrom("西藏","|拉萨|日喀则|山南|林芝|昌都|阿里|那曲");  
where[27] = new comefrom("陕西","|西安|宝鸡|咸阳|铜川|渭南|延安|榆林|汉中|安康|商洛");  
where[28] = new comefrom("甘肃","|兰州|嘉峪关|金昌|白银|天水|酒泉|张掖|武威|定西|陇南|平凉|庆阳|临夏|甘南");  
where[29] = new comefrom("宁夏","|银川|石嘴山|吴忠|固原");  
where[30] = new comefrom("青海","|西宁|海东|海南|海北|黄南|玉树|果洛|海西");  
where[31] = new comefrom("新疆","|乌鲁木齐|石河子|克拉玛依|伊犁|巴音郭勒|昌吉|克孜勒苏柯尔克孜|博尔塔拉|吐鲁番|哈密|喀什|和田|阿克苏");  
where[32] = new comefrom("香港","");  
where[33] = new comefrom("澳门","");  
where[34] = new comefrom("台湾","|台北|高雄|台中|台南|屏东|南投|云林|新竹|彰化|苗栗|嘉义|花莲|桃园|宜兰|基隆|台东|金门|马祖|澎湖");  
where[35] = new comefrom("其它","|北美洲|南美洲|亚洲|非洲|欧洲|大洋洲");  
function select() { 
with(document.creator.province) { var loca2 = options[selectedIndex].value; } 
for(i = 0;i < where.length;i ++) { 
if (where[i].loca == loca2) { 
loca3 = (where[i].locacity).split("|"); 
for(j = 0;j < loca3.length;j++) { with(document.creator.city) { length = loca3.length; options[j].text = loca3[j]; options[j].value = loca3[j]; var loca4=options[selectedIndex].value;}} 
break; 
}} 
document.creator.newlocation.value=loca2+loca4; 
} 
function init() { 
with(document.creator.province) { 
length = where.length; 
for(k=0;k<where.length;k++) { options[k].text = where[k].loca; options[k].value = where[k].loca; } 
options[selectedIndex].text = where[0].loca; options[selectedIndex].value = where[0].loca; 
} 
with(document.creator.city) { 
loca3 = (where[0].locacity).split("|"); 
length = loca3.length; 
for(l=0;l<length;l++) { options[l].text = loca3[l]; options[l].value = loca3[l]; } 
options[selectedIndex].text = loca3[0]; options[selectedIndex].value = loca3[0]; 
}} 
--> 
</script> 
<body onload="init()"> 
<font color=#000000><b>来自:</b>
请输入您所在国家的具体地方。此项可选

 
省份 <select name="province" onChange = "select()"></select> 城市 <select name="city" onChange = "select()"></select>
 
我在 <input type=text name="newlocation" maxlength=12 size=12 style="font-weight: bold"> 不能超过12个字符(6个汉字) 
</form> 

 

效果:

 

 

来自:http://www.alixixi.com/Dev/HTML/jsrun/menu/2007/2007030328601.html

 

  • 大小: 7 KB
分享到:
评论

相关推荐

    省市区三级联动菜单网页特效

    在网页设计中,"省市区三级联动菜单"是一种常见的交互元素,主要用于用户输入或选择地址信息。这种菜单的实现基于JavaScript、HTML和CSS技术,通过动态更新下拉选项来实现省份、城市和区县的关联选择。下面我们将...

    简单实用的省市区3级联动js特效

    总的来说,这款“简单实用的省市区3级联动js特效”通过JavaScript和JSON数据实现了无需数据库的省市区选择功能,大大简化了开发流程,适用于快速构建网页应用中的地址选择组件。通过深入理解这种实现方式,开发者...

    jQuery省市区街道四级联动菜单.zip

    jQuery省市区街道四级联动菜单基于jquery.citys.js制作,二级、三级、四级多种联动菜单示例,扩展显示行政区划第四级(街道)信息,有调用方法,options参数等中文注释。

    jQuery城市三级联动菜单特效.zip

    总结,jQuery城市三级联动菜单特效是网页交互设计中的常见功能,结合jQuery的强大功能和合理的优化策略,可以实现高效、流畅的用户体验。理解其工作原理和优化技巧,对于提升网页交互质量具有重要意义。无论你是前端...

    jQuery手机端右侧弹出省市二级联动城市选择代码

    4. **省市二级联动**:这是一个常见的功能,当用户选择一个省后,市的选项会根据所选省的数据自动更新。这通常通过Ajax请求获取数据,然后使用jQuery动态插入到DOM中。在初始加载时,可以预先加载所有省份,当省份...

    jQuery+Layui省市区城市三级联动菜单选择特效.zip

    在本项目中,"jQuery+Layui省市区城市三级联动菜单选择特效.zip" 提供了一个基于 jQuery 和 Layui 框架实现的三级联动菜单,用于选择中国的省、市、区。这个功能常见于各种在线表单和注册页面,为用户提供了便捷的...

    jQuery手机端省市二级联动选择代码.zip

    《jQuery手机端省市二级联动选择代码详解》 在移动设备应用开发中,用户界面的交互设计至关重要,其中省市二级联动选择是一种常见的功能,用于让用户方便地选择所在的城市和地区。本篇将详细介绍一个基于jQuery实现...

    element-ui省市县三级联动菜单代码.zip

    在"element-ui省市县三级联动菜单代码.zip"这个压缩包中,我们可以推测其内含的示例是使用 Element UI 实现的中国省市县三级联动选择菜单。这种菜单在很多需要用户输入地址信息的场景下非常常见,例如在线购物、地图...

    强大的jQuery省市区城市三级联动插件

    **jQuery省市区城市三级联动插件详解** 在Web开发中,常常需要实现省市区三级联动效果,以便用户在填写表单时能方便地选择所在地区。这款强大的jQuery插件正为此目的而设计,它提供了简单易用的API,使得开发者能够...

    jQuery省市二级联动关联店面查询表单代码.zip

    在网页开发中,经常需要实现一种功能:当用户选择一个省份时,下方的城市下拉菜单会自动更新为与该省份相关的城市选项,这种效果被称为二级联动。这个名为"jQuery省市二级联动关联店面查询表单代码.zip"的压缩包提供...

    jQuery省市区四级联动菜单.zip

    本文将围绕"jQuery省市区四级联动菜单"这一主题,详细讲解如何利用jQuery-1.8.0.min.js来构建这样的交互功能。 首先,理解四级联动菜单的概念。在网页中,当用户在第一级(例如“省份”)中做出选择后,第二级(如...

    jQuery表单省市区城市三级联动特效代码

    在网页开发中,用户经常需要填写地址信息,这时三级联动的省市区城市选择框就显得尤为重要。本知识点主要围绕jQuery实现的三级联动效果,以及如何结合行政区划代码来完善这一功能。 首先,jQuery是一个轻量级、高...

    HTML5手机省市区三级联动地区选择特效代码

    在本案例中,可能是通过监听用户在一级(省)和二级(市)选择的改变事件,动态更新三级(区/县)的选项。这种联动效果提高了页面的响应速度,避免了不必要的数据加载。 为了实现这样的功能,开发者可能使用了HTML5...

    省市县联动element-ui插件.zip

    标题中的“省市县联动”指的是在前端界面上实现的三级联动下拉菜单功能。这种功能常见于地址选择、地区筛选等场景,用户首先选择省份,接着根据省份选择城市,最后根据城市选择县(区)。这一功能可以极大地提高用户...

    jQuery省市区三级联动下拉框特效代码

    在网页开发中,实现省市区三级联动的下拉框是一个常见的需求,这通常涉及到用户输入地址信息时的交互设计。jQuery作为一个轻量级的JavaScript库,因其简洁的API和丰富的插件,使得处理这种复杂的DOM操作变得简单。在...

    jQuery二级联动城市选择特效代码

    本教程将详细讲解如何利用jQuery实现二级联动城市选择的特效,这种功能常见于招聘网站或其他需要按地区筛选的场景。 首先,理解"二级联动"的概念。二级联动通常指的是两个或多个下拉列表之间的关联,当用户在第一个...

    jQuery手机端省市区联动特效代码

    当用户在一级选择(省)中做出选择时,二级(市)和三级(区)的选择会随之更新,展示与所选省份相关的城市和区县。 接下来,我们关注"index.html",这是网页的主文件,包含HTML结构和页面元素。在这个文件中,你...

    JS网页特效

    JavaScript可以监听用户在一级菜单的选择,动态更新并显示相关的二级菜单内容。 4. **下拉菜单控制文本框**:`下来菜单控制文本框.htm`、`下来菜单控制文本框-成功表.htm`可能是指下拉菜单与输入框的联动。当用户...

    JS城市联动菜单特效代码

    在网页设计中,城市联动菜单是一种常见的交互元素,它通常用于地域选择,如省、市、区三级联动,为用户提供便捷的导航体验。这种菜单利用JavaScript(JS)语言实现,能动态响应用户的操作,提供实时反馈。下面我们将...

Global site tag (gtag.js) - Google Analytics