省份城市区县三级联动html代码,基于Jquery实现省份、城市、区县三级联动

-//W3C//DTD HTML 4.01 Transitional//EN”

“;>

$(document).ready(function(){

//省份城市数组

var fujian_city = new Array(‘福州’,’漳州’,’厦门’,’龙岩’,’泉州’,’南平’,’莆田’,’宁德’,’三明’);

var guangdong_city = new Array(‘广州’,’深圳’,’东莞’,’潮州’,’河源’,’汕头’,’珠海’,’佛山’,’肇庆’,’韶关’);

//城市下属区县数组

var fuzhou_county = new Array(‘鼓楼区’,’台江区’,’平潭’,’晋安区’,’马尾区’,’福清市’,’长乐市’,’闽侯县’,’连江县’,’闽清县’);

var zhangzhou_county = new Array(‘芗城区’,’龙文区’,’南靖县’,’平和县’,’龙海市’,’东山县’,’华安县’);

var xiamen_county = new Array(‘湖里区’,’思明区’,’海沧区’,’集美区’,’同安县’,’翔安区’);

//获取省份改变的事件,并设置被选择省份城市信息

$(“#province”).change(function(){

//清空每次选择留下的城市信息

$(“#city”).find(“option”).remove();

//设置未选择的城市默认状态

$(“#city”).append(‘未选择’);

//获取被选中省份的值

var province=$(“#province”).val();

//设置城市的自定义函数

$.extend({set_cities:function(province){

var arr_length = province.length;

for(var i=1;i<=arr_length;i++){

var place_info = ‘’+province[i-1]+'’;

$(“#city”).append(place_info);

}

}});

switch(province){

case ‘福建’:

$.set_cities(fujian_city);

break;

case ‘广东’:

$.set_cities( guangdong_city);

break;

default :

alert(‘没有写信息的省份,这里只展示福建和广东两个省份’);

}

})

//获取改变城市的事件,并设置区县信息,这里只写了福建的福州、漳州、厦门的部分城市信息

$(“#city”).change(function(){

//清空每次选择留下的区县信息

$(“#county”).find(“option”).remove();

//设置未选择的区县默认状态

$(“#county”).append(‘未选择’);

//获取被选中城市的值

var city=$(“#city “).val();

//设置区县的自定义函数

$.extend({set_counties:function(city){

var arr_length = city.length;

for(var i=1;i<=arr_length;i++){

var place_info = ‘’+city[i-1]+'’;

$(“#county”).append(place_info);

}

}});

switch(city){

case ‘福州’:

$.set_counties(fuzhou_county);

break;

case ‘厦门’:

$.set_counties( xiamen_county);

break;

case ‘漳州’:

$.set_counties( zhangzhou_county);

break;

default :

alert(‘这里只写了福建的福州、漳州、厦门的部分城市信息’);

}

})

});

  • 福建

    广东

    浙江

    江西

  • 未选择

  • 未选择

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/563560.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html 页面元素id不唯一,规定html元素的唯一的id属性

实例通过 JavaScript 利用 id 属性来改变一段文本&#xff1a;function change_header(){document.getElementById("myHeader").innerHTML"Nice day!";}Hello World!Change text亲自试一试定义和用法id 属性规定 HTML 元素的唯一的 id。id 在 HTML 文档中必…

计算机网络硬件脆弱性,计算机网络的脆弱性有哪几点

计算机网络系统在设计、实施、应用和控制过程中存在的一切可能被攻击者利用从而造成安全危害的缺陷都是网络的脆弱性。佰佰安全网的专家顾问给出了这个问题的答案。计算机网络脆弱性(vulnerability)涉及一切信息系统或信息网络中可被非预期利用的方面。从整体上看&#xff0c;网…

Html百分比设宽偏差大,前端开发之移动端适配详细讲解

适配问题怎么适配iphone61px问题为什么页面与设计稿会出现偏差&#xff1f;dpr设备像素/ css像素&#xff0c;只有dpr等于1的时候&#xff0c;实际效果和设计稿的尺寸比例才是1:1。因为iPhone6的DPR(设备像素比)为2&#xff0c;设备像素为750&#xff0c;所以iPhone6的理想视口…

关于计算机网络的描述错误的是,【单选题】以下关于计算机网络定义的描述中,错误的是...

问题&#xff1a;【单选题】以下关于计算机网络定义的描述中&#xff0c;错误的是更多相关问题我省为了解决药品价格过高的问题&#xff0c;决定大幅度降低药品价格&#xff0c;其中将原价为a元的某种常用药降价40%&#xff0c;则降价后的今年五月份&#xff0c;由于H7N9禽流感…

计算机考研学科专业基础,2018考研计算机学科专业基础综合考试大纲

I考试性质计算机学科专业基础综合考试是为高等院校和科研院所招收计算机科学与技术学科的硕士研究生而设置的具有选拔性质的联考科目&#xff0c;其目的是科学、公平、有效地测试考生掌握计算机科学与技术学科大学本科阶段专业知识、基本理论、基本方法的水平和分析问题、解决问…

html5 image 同步,html5 image使用大全

html5 image使用大全发布时间&#xff1a;2020-06-06 06:29:13来源&#xff1a;51CTO阅读&#xff1a;768作者&#xff1a;hello_world007html>var p_w_picpathLoader {loaded:true,loadedImages:0,totalImages:0,load:function(url){this.totalImages;this.loaded false;…

全球计算机用户人数,NIC2019年11月:全球IPv6 用户数占比中国居43位

2019年11月&#xff0c;全球IPv4地址分配数量为29B&#xff0c;其中获得最多的是肯尼亚&#xff0c;8B&#xff1b;其次是美国&#xff0c;3B。除亚太、欧洲、拉美、北美等地区IPv4地址已耗尽外&#xff0c;非洲地区处于IPv4地址耗尽第一阶段。各地区IPv4地址消耗情况&#xff…

计算机专业英语作业1,计算机专业英语作业1

计算机专业英语作业1第1&#xff0d;3章作业一&#xff0e;Vocabulary( 词汇)(一)&#xff0e;Translate the following words and expressions into Chinese(写出下列词组的汉语。) 1&#xff0e;central processing unit(CPU) 2.title bar3&#xff0e;operating system 4&am…

登录计算机怎么保存用户名,浏览器保存了账号密码怎么查看,教您怎么查看

有时候登录一个账号输入密码时&#xff0c;浏览器在征得同意后会自动储存并填写密码&#xff0c;但是这些密码都藏哪儿去了呢&#xff1f;当我们忘记了的时候又该如何才能查看呢&#xff1f;可能一些用户不知道该怎么去查看&#xff0c;今天教给大家查看这些已保存的密码的方法…

html jquery 模板,用模版生成HTML的的框架jquery.tmpl使用详解

动态请求数据来更新页面是现在非常常用的方法&#xff0c;比如博客评论的分页动态加载&#xff0c;微博的滚动加载和定时请求加载等。这些情况下&#xff0c;动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML&#xff0c;总之不在浏览器端拼数据就在服务器端拼数据。…

计算机网络项目化实训教程,计算机网络项目实训教程

摘要&#xff1a;《计算机网络项目实训教程》是专门为Nikon D700相机用户或潜在用户量身定制的实用型图书.将官方手册中抽象的功能描述及没有讲清楚的内容,通过实拍测试及精美照片示例具体地展现出来,特别是精选的摄影玩家实际使用经验与技巧,让您感觉身边时刻有"高手点拨…

计算机控制系统第1次作业,计算机控制系统第1次作业86分.doc

计算机控制系统第1次作业86分.doc?co(C)?co(C)计算机控制系统第1次作业(注意&#xff1a;若有主观题目&#xff0c;请按照题目&#xff0c;离线完成&#xff0c;完成后纸质上交学习中心&#xff0c;记录成绩。在线只需提交客观题答案。)本次作业是本门课程本学期的第1次作业&…

html css 魔方,css3实现立体魔方效果

css3魔方div.box {width: 300px;height: 300px;margin: 100px auto;position: relative;transform-style: preserve-3d;animation: rotate 5s linear infinite alternate;}div.box:hover{animation-play-state: paused;}keyframes rotate{0%{transform: rotateX(0) rotateY(0) …

宁波大学2020计算机技术复试线,宁波大学关于公布2020年硕士研究生复试分数线的通知...

导语&#xff1a;宁波大学关于公布2020年硕士研究生复试分数线的通知已发布&#xff0c;圣才考研网小编整理了相关信息如下&#xff0c;欢迎大家点击查看&#xff01;更多考研动态|考试大纲|模拟试题|历年真题请关注圣才考研网。宁波大学关于公布2020年硕士研究生复试分数线的通…

计算机软件及其软件系统,计算机软件系统课件

《计算机软件系统课件》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《计算机软件系统课件(9页珍藏版)》请在人人文库网上搜索。1、计算机软件系统课件计算机软件系统课件计算机软件系统课件1一、学习者分析初一的学生&#xff0c;具有活泼好动的特点&#xff0c;怀着…

计算机语言wifi,Windows7WIFI热点设置器

/// /// 将本程序设为开启自启/// /// 自启开关/// private bool SetMeStart(bool onOff){return SelfRunning(onOff, appName, appPath);}/// /// 判断注册键值对是否存在&#xff0c;即是否处于开机启动状态/// /// 键值名/// private static bool IsExistKey(string keyName…

浅谈WPF之DataGrid过滤,分组,排序

使用过Excel的用户都知道&#xff0c;Excel可以方便的对数据进行分组&#xff0c;过滤&#xff0c;排序等操作&#xff0c;而在WPF中&#xff0c;默认提供的DataGrid只有很简单的功能&#xff0c;那么如何才能让我们开发的DataGrid&#xff0c;也像Excel一样具备丰富的客户端操…

计算机组成原理第六章难,计算机组成原理第六章答案

第6章 计算机的运算方法2. 已知X0.a1a2a3a4a5a6(ai为0或1)&#xff0c;讨论下列几种情况时ai各取何值。 (1)X (2)X (3)121 811X4161&#xff0c;只要a11&#xff0c;a2~a6不全为0即可。 2解&#xff1a; (1)若要X(2)若要X (3)若要1&#xff0c;只要a1~a3不全为0即可。 811 X &a…

2016宁波计算机程序复赛,宁波第31届中小学生计算机程序设计竞赛复赛试题小学组.PDF...

宁波第31届中小学生计算机程序设计竞赛复赛试题小学组宁波市第31 届中小学生计算机程序设计竞赛复赛试题(小学组)宁波市第31 届中小学生计算机程序设计竞赛复赛试题(小学组)比赛时间&#xff1a;2016 年3 月27 日下午13:30-16:00一、题目一览试题名称 平均值 拨算盘 找画笔 射击…

职高学计算机走单招是,职高学生不用愁了,还有机会上本科,走“单招”或是最佳途径!...

原标题&#xff1a;职高学生不用愁了&#xff0c;还有机会上本科&#xff0c;走“单招”或是最佳途径&#xff01;职高学生不用愁了&#xff0c;也有机会上“本科”&#xff0c;走“单招”或是最佳途径随着教育制度的不断改革&#xff0c;中考也成为了人生的分水岭之一&#xf…