省市区三级联动(附j全国省市区json文件)
效果如图所示:
首先提供全国所有省份的JS文件
下载地址:https://files.cnblogs.com/files/likui-bookHouse/address.rar
打开js内容如下:
html代码:
<div class="easyui-panel" style="padding:10px;">
<form id="logisticPointForm" method="post">
<div>
<label>交接点:</label>
<input class="easyui-textbox" id="PointName" name="PointName" data-options="required:true" style="width:70%;">
</div>
<div>
<label>选择区域:</label>
<input class="easyui-combobox" id="Province" name="Province" style="width:22%" , data-options="prompt:'省',required:true,editable:false,">
<input class="easyui-combobox" id="City" name="City" style="width:22%" , data-options="prompt:'市',required:true,editable:false,">
<input class="easyui-combobox" id="County" name="County" style="width:22%" , data-options="prompt:'区/镇',required:true,editable:false,">
</div>
<div>
<label>详细地址:</label>
<input class="easyui-textbox" id="Address" name="Address" data-options="required:true" style="width:70%;">
</div>
<div>
<label>对方物流员:</label>
<input class="easyui-linkbutton" id="OppositeLogister" name="OppositeLogister" style="height:30px;" value="+选择物流员" onclick="sectionManageObj.choiceLogisterDialog(1)" />
<input id="OppositeLogisterId" name="OppositeLogisterId" type="hidden" />
</div>
<div>
<label>我方物流员:</label>
<input class="easyui-linkbutton" id="MyLogister" name="MyLogister" style="height:30px;" value="+选择物流员" onclick="sectionManageObj.choiceLogisterDialog(2)"/>
<input id="MyLogisterId" name="MyLogisterId" type="hidden"/>
</div>
<div>
<label>最晚交接时间:</label>
<!--<input class="easyui-datetimebox" id="LatestDate" name="LatestDate" style="width:30%" ,required:true, data-options="onShowPanel:function(){$(this).datetimebox('spinner').timespinner('setValue','00:00:00')}" >-->
<input class="easyui-timespinner" id="LatestDate" name="LatestDate" required="required" data-options="width:'30%',showSeconds:true">
</div>
<div style="text-align:center;">
<input href="#" class="easyui-linkbutton" value="取消" style="width:100px;height:30px;text-align:center;border-radius:5px;background:dimgray;color:white;" data-options="onClick:sectionManageObj.closeAddDialog">
<input href="#" class="easyui-linkbutton" value="确认" style="width:100px;height:30px;text-align:center;border-radius:5px;background:dodgerblue;color:white;" data-options="onClick:sectionManageObj.addSubmitDialog">
</div>
</form>
</div>
<style>
label {
display: inline-block;
width:80px;
}
#logisticPointForm div {
margin-top:10px;
margin-bottom:10px;
}
</style>
<script>
$('#LatestDate').datetimebox({
required : true,
onShowPanel:function(){
//设置为只能设置为时分秒的选择器
$(this).datetimebox("spinner").timespinner("setValue","00:00:00");
}
}); </script>
//引用js文件
<script type="text/javascript" src="./javascript/address.js"></script>
<script type="text/javascript" src="./javascript/logistics/sectionManage.js"></script>
js代码:
var sectionManageObj = {
ProvinceList: [],
initForm: function () {
site_address.forEach(function (aa, bb) {
if (aa.TopID == ) {
sectionManageObj.ProvinceList.push(aa)
}
});
sectionManageObj.bindaddresscombox('', '', '');
$("#City").combobox({ data: [] })
$("#County").combobox({ data: [] })
},
bindaddresscombox: function (province, city, county) {
$("#Province").combobox({
data: sectionManageObj.ProvinceList,
valueField: "ID",
textField: "AddName",
onChange: function (newvalue) {
$("#City").combobox({
data: sectionManageObj.getsiteaddress(newvalue)
})
$("#County").combobox({
data: []
})
}
});
$("#City").combobox({
valueField: "ID",
textField: "AddName",
onChange: function (newvalue) {
$("#County").combobox({
data: sectionManageObj.getsiteaddress(newvalue)
})
}
});
$("#County").combobox({
valueField: "ID",
textField: "AddName"
});
},
getsiteaddress: function (pID) {
var newlist = [];
site_address.forEach(function (aa, bb) {
if (aa.TopID == pID) {
newlist.push(aa)
}
})
return newlist;
}
}
省市区三级联动(附j全国省市区json文件)的更多相关文章
- javascript 省市区三级联动 附: json数据
html: <label> <span>购买地址</span> <select name="PurchaseProvince" style ...
- 省市区三级联动[JSON+Jquery]
<!DOCTYPE html><head> <title>省市区三级联动[JSON+Jquery]</title> <script src=&qu ...
- jquery省市区三级联动(数据来源国家统计局官网)内附源码下载
很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...
- javaweb--json--ajax--mysql实现省市区三级联动(附三级联动数据库)
在web中,实现三级联动很常见,尤其是利用jquery+json.但是从根本上来说jquery并不是最能让人容易理解的,接下来从最基本的javascript开始,实现由javascript+json+ ...
- JQuery+Json 省市区三级联动
一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...
- 【转】纯JS省市区三级联动(行政区划代码更新至2015-9-30)
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...
- jquery省市区三级联动
jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...
- JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
- 用jsp实现省市区三级联动下拉
jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善 ...
随机推荐
- Unity3D热更新之LuaFramework篇[01]--从零开始
前言 因工作关系,需要对手头的项目进行热更新支持.了解后发现,Lua的几个变种:XLua.ToLua(原uLua)和Slua都可以做Unity热更,而ToLua更是提供了一个简易的热更框架--LuaF ...
- Dependency injection in .NET Core的最佳实践
我们知道依赖注入(DI)是一种实现对象及其协作者或依赖关系之间松散耦合的技术. ASP.NET Core包含一个简单的内建容器来支持构造器注入. 我们试图将DI的最佳实践带到.NET Core应用程序 ...
- Vc数据库编程基础MySql数据库的常见库命令.跟表操作命令
Vc数据库编程基础MySql数据库的常见操作 一丶数据库常见的库操作 1.1查看全部数据库 命令: show databases 1.2 创建数据库 命令: Create database 数据库名 ...
- PHP中的__set和__get方法
当调用或者设置类不存在的方法时,_会调用_set和__get方法 以下是示例 <?php class HandsonBoy { private $name = 'chenqionghe'; pr ...
- Python中的可变、不可变对象和赋值技巧序列解包
可变对象和不可变对象 在python中一切皆对象.在Python中不存在所谓的值传递调用,一切传递都是对象的引用,也可认为是传址. python中,对象分为可变(mutable)和不可变(immuta ...
- Perl:写POD文档
官方手册:https://perldoc.perl.org/perlpod.html POD文档是perl的man文档,可以用perldoc输出,也可以直接用man输出.在开始下面的文章之前,请先粗略 ...
- java实现带空格字符串的倒序输出
import org.junit.Test; public class StringtoChar { @Test public void main(){ String str ="hello ...
- Spring Boot入门(12)实现页面访问量统计功能
在日常的网站使用中,经常会碰到页面的访问量(或者访问者人数)统计.那么,在Spring Boot中该如何实现这个功能呢? 我们的想法是比较简单的,那就是将访问量储存在某个地方,要用的时候取出来 ...
- 第一册:lesson seventy seven。
原文:terrible toothache. Good morning Mr.Croft. Good morning nurse. I want to see the dentist,please. ...
- $_POST和$GLOBALS['HTTP_RAW_POST_DATA'] 的区别
HTTP 协议是建立在 TCP/IP 协议之上的应用层规范,它把 HTTP 请求分为三个部分:请求行.请求头.消息主体.协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协 ...