js城市级联功能

最新推荐文章于 2023-06-19 09:20:03 发布
最新推荐文章于 2023-06-19 09:20:03 发布
阅读量3.8w 收藏 2
点赞数
文章标签： javascript button function input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hejinxu/article/details/5975955
版权

页面

 

 

js文件

 

Josh
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
全国城市三级级联
10-17
全国城市三级级联全国城市三级级联
23444444444444444444444444444444
punklove的专栏
11-27 7401
<br /><br />一般我们如果实现省市级联效果，思路大致都如下：<br /> <br />1、利用省份下拉框的选项改变事件onChange<br />2、根据用户选择的省份，动态添加城市下拉框的值<br />第一种方式，也是最原始的方式Html代码 <span style="font-size: large;"><HTML>  <HEAD>  <META http-equiv="Content-Type" content="text/html; charset=gb2312">  <TITLE>注册<
web前端之城市级联
FemaleHacker的博客
06-27 5762
城市级联 最近看了篇不错的博客，效果实现的也不错，但存在细小问题，所以就原作者博客代码基础上进行了细微修改。 说明 原博主代码实现了选择省份,自动对应出地市. 选择地市可自动对应出区县。 但存在的细小问题在于，自动对应出城市后，县区无法选择。 例如省：北京市，则市会自动对应市辖区，但此时区县无法进行选择。 主要是在每一个列表内添加了一行下段代码： {name:'请选择市',areaList:['请选择区']}, 原博主代码实现展示 效果图 未点击时： 点击“请选择省”： 选择完省份后： 选择完城市
城市级联选择--二级联动json数据
最新发布
Rilan_Li的博客
06-19 651
vant 城市级联选择器（二级联动）json数据
js省级联动
aimaonu2505的博客
02-16 1730
1.webform页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Sslt.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http...
js实现全国省份城市级联下拉菜单效果代码
10-23
主要介绍了js实现全国省份城市级联下拉菜单效果代码,通过JavaScript针对数组的定义与元素的遍历实现省市级联菜单功能,非常具有实用价值,需要的朋友可以参考下
城市级联之三级联动
03-20
其中包括：Select.js:主要实现功能的js；Util.js:工具js，封装一些ajax的请求方法以及创建ajax的方法还有模拟jQuery的根据id获取dom对象；Struts.xml:主要亮点在配置一个多变级联时防止加载多个表的操作，从而达到...
cityselect-lite:一个精简版的城市级联组件，基于KISSY
06-05
CityselectLite是一个精简版的城市级联组件。 Version: 0.0.1 Author: NatureFeng E-Mail: 功能 城市级联 用户自己即时改变select值 使用 <select name="" id="province"></select> <select name="" ...
实用jQuery省市区三级城市级联下拉菜单选择插件jQuery cxSelect
01-02
实用jQuery省市区三级城市级联下拉菜单选择插件jQuery cxSelect，功能强大非常不错的jQuery插件， 支持省市区三级联动以及全球国家城市的联动，数据采用JSON格式导入，非常方便的，强大的参数 自定义功能，还可以...
js实现 全国城市的三级联动
dogface博客
05-21 876
js实现 全国城市的三级联动 function Dsy() { this.Items = {}; } Dsy.prototype.add = function (id, iArray) { this.Items[id] = iArray; } Dsy.prototype.Exists = function (id) { if (typeof(this.Items[id]) == "undefined") return false; return true.
城市级联城市级联城市级联.js
12-30
城市级联 城市级联城市级联城市级联城市级联城市级联城市级联城市级联
纯JS---省份城市级联选择,
09-19
纯JS---省份城市级联选择,
全世界城市级联数据库外加中国到区域
09-07
全世界城市级联数据库外加中国到区域 州.国 .省 都是有英文的 到中国区 就没有英文了，只有中文 mysql 数据库类型 值得你拥有
中国城市级联表SQL省市区一体表
11-01
此表是一体表，一个表包含了省市区 'ID', '父级id', '简称', '名称', '全称', '层级 0 1 2 省市区县', '拼音', '长途区号', '邮编', '首字母', '经度', '纬度',
中国城市级联数据.zip
05-21
这个数据是用于城市级联的基础数据，以便js可以调用处理。
JS省份联级下拉框
aml53256的博客
07-07 615
<script type="text/javascript"> var china=new Object();china['北京市']=new Array('北京市区','北京市辖区');china['上海市']=new Array('上海市区','上海市辖区');china['天津市']=new Array('天津市区','天津市辖区');china['重庆市']=n...
城市地级联选择
itclanCoder
12-01 926
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）城市地级联...
JavaScript实现select下拉菜单省份和城市的级联菜单
syy的博客
11-19 2806
使用JavaScript实现数组与select标签结合使用对省份及对应的城市的显示
javaScript城市级联选择
04-09
NULL 博文链接：https://nassir.iteye.com/blog/1407666
html+js 实现级联选择框代码
04-26
可以使用html和js实现级联选择框的功能，以下是一个简单的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>级联选择框</title> </head> <body> <form> <select id="province"> <option value="">请选择省份</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="area"> <option value="">请选择地区</option> </select> </form> <script type="text/javascript"> //省份数据 var provinceData = [ { name: '北京', city: [ { name: '北京市', area: ['东城区', '西城区', '朝阳区', '海淀区', '丰台区'] } ] }, { name: '上海', city: [ { name: '上海市', area: ['黄浦区', '徐汇区', '长宁区', '静安区', '浦东新区'] } ] } ]; //城市数据 var cityData = {}; //地区数据 var areaData = {}; //初始化省份数据 function initProvince() { var provinceSelect = document.getElementById('province'); //添加省份数据 for (var i = 0; i < provinceData.length; i++) { var province = provinceData[i]; var option = document.createElement('option'); option.value = province.name; option.text = province.name; provinceSelect.appendChild(option); } //绑定省份选择事件 provinceSelect.onchange = function() { var citySelect = document.getElementById('city'); var areaSelect = document.getElementById('area'); //如果省份未选中，则清空城市和地区选择框数据 if (provinceSelect.value === '') { citySelect.innerHTML = '<option value="">请选择城市</option>'; areaSelect.innerHTML = '<option value="">请选择地区</option>'; return; } //如果城市和地区已选中，则不需要再次加载数据 if (citySelect.value !== '' && areaSelect.value !== '') { return; } //加载城市数据 var provinceName = provinceSelect.value; if (cityData[provinceName]) { //如果已经加载过城市数据，则直接从内存中读取 var cityList = cityData[provinceName]; } else { //如果没有加载过，则从省份数据中查找对应城市数据 for (var i = 0; i < provinceData.length; i++) { if (provinceData[i].name === provinceName) { cityList = provinceData[i].city; cityData[provinceName] = cityList; break; } } } //添加城市数据 citySelect.innerHTML = '<option value="">请选择城市</option>'; for (var i = 0; i < cityList.length; i++) { var city = cityList[i]; var option = document.createElement('option'); option.value = city.name; option.text = city.name; citySelect.appendChild(option); } //清空地区数据 areaSelect.innerHTML = '<option value="">请选择地区</option>'; }; } //初始化城市数据 function initCity() { var citySelect = document.getElementById('city'); //绑定城市选择事件 citySelect.onchange = function() { var areaSelect = document.getElementById('area'); //如果城市未选中，则清空地区选择框数据 if (citySelect.value === '') { areaSelect.innerHTML = '<option value="">请选择地区</option>'; return; } //如果地区已选中，则不需要再次加载数据 if (areaSelect.value !== '') { return; } //加载地区数据 var provinceName = document.getElementById('province').value; var cityName = citySelect.value; if (areaData[provinceName + cityName]) { //如果已经加载过地区数据，则直接从内存中读取 var areaList = areaData[provinceName + cityName]; } else { //如果没有加载过，则从省份数据和城市数据中查找对应地区数据 for (var i = 0; i < provinceData.length; i++) { if (provinceData[i].name === provinceName) { var cityList = provinceData[i].city; for (var j = 0; j < cityList.length; j++) { if (cityList[j].name === cityName) { areaList = cityList[j].area; areaData[provinceName + cityName] = areaList; break; } } break; } } } //添加地区数据 areaSelect.innerHTML = '<option value="">请选择地区</option>'; for (var i = 0; i < areaList.length; i++) { var area = areaList[i]; var option = document.createElement('option'); option.value = area; option.text = area; areaSelect.appendChild(option); } }; } //初始化级联选择框 function init() { initProvince(); initCity(); } init(); </script> </body> </html> ``` 在该示例代码中，需要先定义省份数据、城市数据和地区数据，然后在页面加载时初始化省份选择框，并绑定省份选择事件；当省份选择框改变时，根据选中的省份加载对应的城市数据，并添加到城市选择框中，同时清空地区选择框数据；当城市选择框改变时，根据选中的省份和城市加载对应的地区数据，并添加到地区选择框中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值