简单的,省份和城市选择,非ajax版

城市选择二级联动、三级联动的思路 今天为了做项目写了个城市选择二级联动的插件,首先放上效果图如图所示。实现的效果是选择左边的省份后,右边点击后会出现相应省份的所有城市。 这里我采用了ajax引入json的方法。关于ajax和json我将会在之后写。 首先,我从网上找了一份包含所有省份和城市的json文件。由于不知道怎么上传我就单独发了一篇博客,把json文件的代码贴出来了,具体可以看city.json。 其实这个json文件并 阅读详情
var selectOption=
{'四川省':{'key':'0','defaultvalue' : '成都','values':{'请选择…':'0'}},'安徽省':{'key':'安徽省','values':{'安庆':'安庆','蚌埠':'蚌埠','巢湖':'巢湖','滁州':'滁州','阜阳':'阜阳','贵池地区':'贵池地区','合肥':'合肥','淮北':'淮北','淮化':'淮化','淮南':'淮南','黄山':'黄山','六安':'六安','马鞍山':'马鞍山','宿州':'宿州','铜陵':'铜陵','屯溪':'屯溪','芜湖':'芜湖','宣城':'宣城'}},'澳门行政区':{'key':'澳门行政区','values':{'澳门':'澳门'}},'北京':{'key':'北京','values':{'北京市':'北京市','燕郊':'燕郊'}},'福建省':{'key':'福建省','values':{'福安':'福安','福州':'福州','龙岩':'龙岩','南平':'南平','宁德地区':'宁德地区','莆田':'莆田','泉州':'泉州','三明':'三明','邵武':'邵武','厦门':'厦门','永安':'永安','漳州':'漳州'}},'甘肃省':{'key':'甘肃省','values':{'白银':'白银','定西地区':'定西地区','敦煌':'敦煌','甘南州':'甘南州','金昌':'金昌','酒泉':'酒泉','兰州':'兰州','临夏自治州':'临夏自治州','平凉地区':'平凉地区','天水':'天水','武都':'武都','西峰':'西峰','张掖地区':'张掖地区'}},'广东省':{'key':'广东省','values':{'潮阳':'潮阳','潮州':'潮州','东莞':'东莞','佛山':'佛山','广州':'广州','河源':'河源','惠州':'惠州','江门':'江门','揭阳':'揭阳','茂名':'茂名','梅州':'梅州','清远':'清远','汕头':'汕头','汕尾':'汕尾','韶关':'韶关','深圳':'深圳','顺德':'顺德','阳江':'阳江','英德':'英德','云浮':'云浮','湛江':'湛江','肇庆':'肇庆','中山':'中山','珠海':'珠海'}},'广西自区':{'key':'广西自区','values':{'百色':'百色','北海':'北海','防城港':'防城港','桂林':'桂林','河池':'河池','柳州':'柳州','南宁':'南宁','钦州':'钦州','梧州':'梧州','玉林':'玉林'}},'贵州省':{'key':'贵州省','values':{'安顺':'安顺','毕节':'毕节','都匀':'都匀','贵阳':'贵阳','凯里':'凯里','六盘水':'六盘水','铜仁':'铜仁','兴义':'兴义','玉屏':'玉屏','遵义':'遵义'}},'海南省':{'key':'海南省','values':{'海口':'海口','三亚':'三亚','通什':'通什','儋县':'儋县'}},'河北省':{'key':'河北省','values':{'保定':'保定','沧州':'沧州','承德':'承德','丰润':'丰润','邯郸':'邯郸','衡水':'衡水','廊坊':'廊坊','秦皇岛':'秦皇岛','石家庄':'石家庄','唐山':'唐山','新城':'新城','邢台':'邢台','张家口':'张家口'}},'河南省':{'key':'河南省','values':{'安阳':'安阳','鹤壁':'鹤壁','焦作':'焦作','开封':'开封','洛阳':'洛阳','南阳':'南阳','平顶山':'平顶山','三门峡':'三门峡','商丘':'商丘','新乡':'新乡','信阳':'信阳','许昌':'许昌','郑州':'郑州','周口地区':'周口地区','驻马店':'驻马店','潢川':'潢川','漯河':'漯河','濮阳':'濮阳'}},'黑龙江省':{'key':'黑龙江省','values':{'北安':'北安','大庆':'大庆','大兴安岭':'大兴安岭','哈尔滨':'哈尔滨','鹤岗':'鹤岗','黑河':'黑河','鸡西':'鸡西','佳木斯':'佳木斯','牡丹江':'牡丹江','七台河':'七台河','齐齐哈尔':'齐齐哈尔','双鸭山':'双鸭山','绥化':'绥化','伊春':'伊春'}},'湖北省':{'key':'湖北省','values':{'鄂州':'鄂州','恩施':'恩施','黄岗':'黄岗','黄石':'黄石','荆门':'荆门','荆州':'荆州','潜江':'潜江','十堰':'十堰','随州':'随州','武汉':'武汉','仙桃':'仙桃','咸宁':'咸宁','襄樊':'襄樊','襄阳':'襄阳','孝感':'孝感','宜昌':'宜昌'}},'湖南省':{'key':'湖南省','values':{'常德':'常德','长沙':'长沙','郴州':'郴州','衡阳':'衡阳','怀化':'怀化','吉首':'吉首','娄底':'娄底','邵阳':'邵阳','湘潭':'湘潭','益阳':'益阳','永州':'永州','岳阳':'岳阳','张家界':'张家界','株洲':'株洲'}},'吉林省':{'key':'吉林省','values':{'白城':'白城','白山':'白山','长春':'长春','吉林':'吉林','辽源':'辽源','梅河口':'梅河口','四平':'四平','松原':'松原','通化':'通化','延吉':'延吉','珲春':'珲春'}},'江苏省':{'key':'江苏省','values':{'常熟':'常熟','常州':'常州','淮阴':'淮阴','连云港':'连云港','南京':'南京','南通':'南通','苏州':'苏州','泰州':'泰州','无锡':'无锡','徐州':'徐州','盐城':'盐城','扬州':'扬州','镇江':'镇江','沭阳':'沭阳'}},'江西省':{'key':'江西省','values':{'抚州地区':'抚州地区','赣州':'赣州','吉安地区':'吉安地区','井冈山':'井冈山','景德镇':'景德镇','九江':'九江','南昌':'南昌','萍乡':'萍乡','上饶':'上饶','新余':'新余','宜春地区':'宜春地区','鹰潭':'鹰潭'}},'辽宁省':{'key':'辽宁省','values':{'鞍山':'鞍山','本溪':'本溪','朝阳':'朝阳','大连':'大连','丹东':'丹东','抚顺':'抚顺','阜新':'阜新','葫芦岛':'葫芦岛','锦州':'锦州','辽阳':'辽阳','盘锦':'盘锦','沈阳':'沈阳','铁岭':'铁岭','营口':'营口'}},'内蒙古自区':{'key':'内蒙古自区','values':{'阿拉善盟':'阿拉善盟','包头':'包头','赤峰':'赤峰','东胜':'东胜','海拉尔':'海拉尔','呼和浩特':'呼和浩特','集宁':'集宁','临河':'临河','通辽':'通辽','乌海':'乌海','乌兰浩特':'乌兰浩特','锡林浩特':'锡林浩特'}},'宁夏自区':{'key':'宁夏自区','values':{'固源地区':'固源地区','石嘴山':'石嘴山','吴忠':'吴忠','银川':'银川'}},'青海省':{'key':'青海省','values':{'德令哈':'德令哈','格尔木':'格尔木','共和':'共和','海东地区':'海东地区','海晏':'海晏','玛沁':'玛沁','同仁':'同仁','西宁':'西宁','玉树自治州':'玉树自治州'}},'山东省':{'key':'山东省','values':{'滨州地区':'滨州地区','德州':'德州','地区':'地区','东营':'东营','菏泽':'菏泽','济南':'济南','济宁':'济宁','莱芜':'莱芜','聊城':'聊城','临沂':'临沂','青岛':'青岛','日照':'日照','泰安':'泰安','威海':'威海','潍坊':'潍坊','薛城':'薛城','烟台':'烟台','枣庄':'枣庄','淄博':'淄博','兖州':'兖州'}},'山西省':{'key':'山西省','values':{'长治':'长治','大同':'大同','候马':'候马','晋城':'晋城','离石':'离石','临汾地区':'临汾地区','宁武':'宁武','朔州':'朔州','太原':'太原','析州地区':'析州地区','阳泉':'阳泉','榆次':'榆次','运城地区':'运城地区'}},'陕西省':{'key':'陕西省','values':{'安康地区':'安康地区','宝鸡':'宝鸡','汉中':'汉中','商州地区':'商州地区','绥德':'绥德','铜川':'铜川','渭南':'渭南','西安':'西安','咸阳':'咸阳','延安':'延安','榆林地区':'榆林地区'}},'上海市':{'key':'上海市','values':{'上海市':'上海市'}},'四川省':{'key':'四川省','values':{'成都':'成都','巴中地区':'巴中地区','达州地区':'达州地区','德阳':'德阳','涪陵':'涪陵','广安':'广安','广元':'广元','康定':'康定','乐山':'乐山','马尔康':'马尔康','绵阳':'绵阳','南充':'南充','内江':'内江','攀枝花':'攀枝花','遂宁':'遂宁','西昌':'西昌','雅安地区':'雅安地区','宜宾':'宜宾','自贡':'自贡','汶川':'汶川','泸州':'泸州'}},'台湾省':{'key':'台湾省','values':{'高雄市':'高雄市','嘉义':'嘉义','台北市':'台北市','台南县':'台南县','台中县':'台中县','桃园市':'桃园市','新化县':'新化县','新竹':'新竹','漳化县':'漳化县'}},'天津市':{'key':'天津市','values':{'静海':'静海','天津市':'天津市','武清':'武清'}},'西藏自区':{'key':'西藏自区','values':{'阿里地区':'阿里地区','昌都地区':'昌都地区','拉萨':'拉萨','林芝地区':'林芝地区','那曲地区':'那曲地区','日喀则':'日喀则','山南地区':'山南地区'}},'香港行政区':{'key':'香港行政区','values':{'香港':'香港'}},'新疆自区':{'key':'新疆自区','values':{'阿克苏':'阿克苏','阿勒泰地区':'阿勒泰地区','阿图什':'阿图什','博乐':'博乐','昌吉自治州':'昌吉自治州','东山':'东山','哈密':'哈密','和田':'和田','喀什':'喀什','克拉玛依':'克拉玛依','库车':'库车','库尔勒':'库尔勒','奎屯':'奎屯','石河子':'石河子','塔城地区':'塔城地区','吐鲁番':'吐鲁番','乌鲁木齐':'乌鲁木齐','伊宁':'伊宁'}},'云南省':{'key':'云南省','values':{'保山地区':'保山地区','楚雄自治州':'楚雄自治州','大理':'大理','东川':'东川','个旧':'个旧','景洪':'景洪','开远':'开远','昆明':'昆明','丽江地区':'丽江地区','临沧地区':'临沧地区','六库':'六库','潞西':'潞西','曲靖':'曲靖','思茅地区':'思茅地区','文山自治州':'文山自治州','玉溪':'玉溪','昭通地区':'昭通地区','中甸':'中甸'}},'浙江省':{'key':'浙江省','values':{'定海':'定海','杭州':'杭州','湖州':'湖州','嘉兴':'嘉兴','金华':'金华','丽水':'丽水','临海':'临海','宁波':'宁波','绍兴':'绍兴','台州':'台州','温州':'温州','义乌':'义乌','舟山':'舟山','衢州':'衢州','瓯海':'瓯海'}},'重庆市':{'key':'重庆市','values':{'长寿':'长寿','达洲':'达洲','合川':'合川','江津':'江津','乐山':'乐山','黔江':'黔江','荣昌':'荣昌','中江':'中江','忠县':'忠县','重庆市':'重庆市'}},'海外':{'key':'海外','values':{'美国':'美国','英国':'英国','法国':'法国','瑞士':'瑞士','澳洲':'澳洲','新西兰':'新西兰','加拿大':'加拿大','奥地利':'奥地利','韩国':'韩国','日本':'日本','德国':'德国','意大利':'意大利','西班牙':'西班牙','俄罗斯':'俄罗斯','泰国':'泰国','印度':'印度','荷兰':'荷兰','新加坡':'新加坡','欧洲':'欧洲','北美':'北美','南美':'南美','亚洲':'亚洲','非洲':'非洲','大洋洲':'大洋洲'}}};
function initProvinceAndCity(pid,cid,p,c)
{
	if(typeof(selectOption[p])=='undefined')
	{
		console.log(p+' 这个省份不存在');
		return;
	}
	var p_html = '';
	for(var name in selectOption)
	{
		if(name==p)
		{
			p_html+='<option value="'+name+'" selected>'+name+'</option>';
			provinceChanged(cid,p);
		}else{
			p_html+='<option value="'+name+'">'+name+'</option>';
		}
	}
	$('#'+pid).html(p_html);
	$('#'+pid).live("change",function(){
			provinceChanged(cid,this.value);
		}
	);
}
function provinceChanged(cid,p)
{
	if(typeof(selectOption[p])=='undefined')
	{
		console.log(p+' 这个省份不存在');
		return;
	}
	var c_html = '';
	for(var cname in selectOption[p].values)
	{
		c_html+='<option value="'+cname+'">'+cname+'</option>';
	}
	$('#'+cid).html(c_html);
}

//用法initProvinceAndCity("province","city",info.province,info.city);

 

我的QQ群:

PHPer&Webgame&移动开发,群号:95303036


 

js+php做省份城市选择,三级联动,前后端简单交互,最详细 文件我写了四个,一个html,三个php,都放在xampp文件夹的htdocs或者dashboard里,要运行网页的时候,不能直接打开,要打开服务器网页,然后根据路径打开,我的在网页上的路径是这样的,没有红色或×或者报错,就能正常运行,如果软件有报错问题,可以网上搜索相关解决方案,都有.需要先安装xampp,,免费的软件,然后运行apache,我安装的英文版。我的文件夹里面会有软件相关的文件,和此次代码用到的文件。写代码前要知道的知识。下面是三个php代码。 阅读详情

相关推荐

『与善仁』Appium基础 — 19、元素定位工具之UI Automator Viewer

文章目录(一)uiautomatorviewer定位工具1、uiautomatorviewer介绍2、uiautomatorviewer工具打开方式3、uiautomatorviewer布局介绍4、uiautomatorviewer工具的使用 之前我们在做web页面自动化的时候就说过,元素定位是页面自动化的第一步。 同理App自动化测试的第一步,也是元素的定位。 在APP中定位元素的话,需要借助一些元素定位工具。 APP中的元素定位工具大致有三种: uiautomatorviewer Appium Ins

繁华似锦Fighting 1520

省市区三级联动 thinkphp5(附json文件)

只怪自己学艺不精,基础不牢固,写这个弄了好久时间,数组那里有点烦,绕来绕去emmm index.php文件 <?php namespace app\index\controller; use app\common\controller\Base; //导入公共控制器 class Index extends Base { public function index() ...

meihuasheng的博客 1474

海上AI导航系统:技术架构与行业应用解析

计算机视觉与强化学习技术在海上导航系统中的应用正逐步改变传统航运业。通过多模态传感器融合技术,现代AI导航系统能够实现高精度的物体识别与实时路径规划,有效解决能见度依赖、决策延迟等核心痛点。以Orca AI的SeaPod系统为例,其结合了NVIDIA GeForce RTX 4070的边缘计算能力与多光谱协同识别技术,在恶劣环境下仍能保持稳定性能。这类系统不仅提升了航行安全性,还通过优化航线显著降低燃油消耗,在东京湾、马六甲海峡等繁忙水域展现出巨大价值。随着毫米波雷达融合方案的测试推进,未来海上导航将突破极

weixin_33597080的博客 354

js拼接二维数组

原数组样式: {  "msg": "ok",  "status": "1",  "data": [  {    "id": 1,    "provinceid": "110000",    "province": "北京市",    "cityinfo": [      {        "id": 1,        "cityid": "110100",        "city": "

xiaoxiaohui520134的博客 7191

【hadoop编译报错】(yarn install) on project hadoop-yarn-applications-catalog-webapp Failed to run task

ambari+bigtop自定义组件集成

TTBIGDATA的博客 1803

Cesium 模拟飞机坠毁功能

Cesium 模拟飞机坠毁功能,粒子模拟

QQhelphelp的博客 1068

全国城市信息

全国城市信息包含了省份、市、县。

weixin_41290863的博客 610

手把手教你用u-center配置ublox GPS模块:从波特率到报文频率全流程

本文提供了一份详细的u-center软件配置ublox GPS模块的完整指南。从硬件连接到软件设置,逐步讲解了如何探测并设置正确的波特率、选择与启用关键的NMEA和UBX报文,以及配置输出频率。文章特别强调了配置固化的重要性,并分享了使用UBX协议进行高效数据解析等高级技巧,帮助开发者快速上手并优化GPS模块性能。

weixin_28285943的博客 897

百度地图城市代码CityID

基于不方便联网的硬件设备,可根据使用地域下载相应的离线地图包,下面是百度地图离线地图下载用到的国内城市ID。 1,安徽 | 2,河南 | 6,广东 | 7,广西 | 8,山西 | 9,辽宁 | 10,陕西 | 11,山东 | 12,西藏 | 13,云南 | 15,湖南 | 16,甘肃 | 17,贵州 | 18,江西 | 19,内蒙古 | 20,青海 | 21,河北 | 22,宁夏 | 23,福...

weixin_40191474的博客 9001

SAP WM模块配置详解

1.给工厂/存储地点分配仓库编码 功能说明 配置路径 IMG>企业结构>分配>分配后勤执行>给工厂/存储地点分配仓库编码 业务示例 配置步骤 2.定义仓库号码控制参数 功能说明 配置路径 IMG>后勤执行>仓库管理>主数据>主数据>定义仓库号码控制参数 业务示例 配置步骤 3.定义编码范围 功能说明 配置路径 IMG>后勤执行>仓库...

weixin_40672823的博客 2万+

Spark on Yarn 高可用模式部署流程

本文介绍了如何配置Spark和Yarn的高可用(HA)环境,以确保在大规模数据处理中避免单点故障。

xhaoDream的博客 1444

根据选择下拉框选择省份动态显示城市

//ajax获取城市 public function ajaxfindcity(){ $province =intval($_GET['province']); $citylist = $GLOBALS['db']->getAll(" select * from ".DB_PREFIX."area where parent_id=$province"); $str = "=请选

lengxin337的专栏 1万+

从0到1打造一台机器人走起来

1)本体机械结构设计,依据人体生物学和生物力学知识,结合机器人运动时各关节扭矩需求,进行合理选用电机,比如胯部需要大扭矩,腿部惯量小等2)硬件拓扑上,分层架构的信号层和功率协同工作,高带宽,低延时,硬实时3)步态规划设计与验证环节实机回溯和部署过程:Real2Sim,Sim2Sim,Sim2Real。

weixin_43163941的博客 243

select选择框和js实现省份城市级联查询

文章目录实现效果如何实现代码 单表的查询我们很轻易的就能够查出省份和城市,但是有很多情况需要进行级联选择查询,本文就是使用select和js实现! 实现效果 实现效果:选择省份,点击另一个select框显示对应城市。 如何实现 想要实现这样的效果我们需要给省份这个select添加一个onchange事件,通过js来控制城市的select展示的内容 代码 html代码: <select c...

fight252的博客 4435

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

ajax实现选择省份带出城市(从数据库取数据)

实现选择省份后可以带出省份的城市

big121380的博客 2873

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

jQuery技术——根据省份的选择动态加载相应城市

jQuery技术是js技术的一个框架,可以利用它强大的功能动态显示一些控件.下面是一个非常有意思和实用的情境,对于巩固jQuery技术十分有用,我们也可以充分体会到其强大之处! 情景假设:现有一个页面, 1.要求先加载所有省份的复选框(其中包含一个*的checkbox,当选择此项时,表明不特指某个省份,将加载所有城市).如果勾选或取消勾选某一省份的复选框时,会加载或去除对应的城市复选框; 同时,

qq_18875541的博客 2988

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

关于省份城市二级联动的实现(简单易理解)

首先是我们的json数据,这里只粘几个省份的信息就好了,主要是展示结构,方便下面的理解 首先引用jQuery,然后在body体内给出两个select选择框,加上id选择器 下面就是完整的代码了: <body> <select name="province" id="province"></select> <select name="city" id...

navicat如何创建数据库和表 832

ajax的省份城市下拉联动

基于XML,以POST方式,完成省份-城市二级下拉联动 数据库 mysql,表:tab_province,tab_city SSM项目,使用注解开发 jsp页面ajaxJquery <script> function getCity(){ var provinceid = $("#provinceid").val(); $.ajax({ method:"post", ur...

WithElapse的博客 408

Jquery AJAX选择省份,市区

前端部分: AJAX获取省份 *{ padding:0; margin:0; } #select,#select2{ width: 100px; height: 20px; } .option{ width: 100p

sonnylight的博客 3334

中国省份城市级联选择--asp.net +jquery +json +xml

      以前用.net实现中国省份城市的级联选择,但是ajax是用.net的scripManager和updatePanel来实现的,总感觉有点类似于作弊器的感觉,而且有些朋友似乎对这个。net服务端控件很是反感,所以今天抽个空写了些使用JavaScript类库jquery来请求ajax的城市,实现的效果基本上相同,不想用的话就当是学习喽      首先新建一个页面Index.aspx,代码如下     

侯永奎 2990

servlet+ajax实例:由省份选择城市

一、test.html  MyHtml.html  function getResult(stateVal) {   var url = "servlet/SelectCityServlet?state="+stateVal

javatwt的专栏 1286

elementUI 区域省份城市联动

<list-area-template region="region" province="province" city="city" style="width:30%;"></list-area-template> Vue.component('list-area-template', { props: { region: { type: .

madehaiyoushei的博客 1190

省份城市jquery简单的二级联动,query代码

ER_JI.html -->     //页面加载     $(function() {         //页面加载便加载省份         loadP();         $("#prov").change(function(){             //$("#city").empty();             loadC();

ljw_logs的博客 2082

MySQL node.js Ajax 省份城市二级联动

目录 db.js index.js city.html 常规配置好db.js city.html初始化的时候发送ajax请求,端口号为8080,由index.js接受此请求并匹配其中对应的路由方法。city.html中匹配index.js中路由 连接数据库查询省份表中所有的数据,把结果响应给客户端 let sql ="select * from province";...

stayreal_OAOA 369

中国省份城市级联选择--JavaScript

前一段做了一个小程序居然都用到列表框选择城市,一直都是在里面直接编辑项,这样没做一次都要写那么多的城市名,真是让人有崩溃的冲动,网上也有很多实现方法,趁着空闲时间,自己也写几种常

wcqlwyt的博客 868
上一篇: popen——php多进程利器
下一篇: AppCan的图片、文件操作、上传、下载操作 From Ken
leinchu
博客等级 码龄22年 156粉丝 193原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值