(function ($) {
$.fn.Address = function (options) {
var defaults = {
divid: "Address",
callback: function (pageindex) {
}
};
var opts = $.extend(defaults, options);
var AddressHtml = "";
AddressHtml = ("<span class=\"province\" ><select id=\"Pro\" name=\"Region_Province\"></select></span>" +
"" + "<span class=\"province\" ><select id=\"city\" name=\"Region_City\"><option>地级市</option></select></span>" +
"" + "<span class=\"province\"><select id=\"area\" name=\"Region_Xian\"><option >市县级市</option></select></span>" +
"" + "<span class=\"fillin\"><input type=\"text\" id=\"addressdetial\" name=\"Region_Detail\"></span>" +
"" + "<span id=\"addressdetialSpan\" style=\"padding-left:10px;padding-top:3px;\"></span>");
$("#" + opts.divid).html(AddressHtml);
$.ajax({
type: "get",
contentType: 'text/json',
url: "/common/read",
dataType: "json",
success: function (data) {
var html = "<option value='0'>省份</option>";
$.each(data, function (i, dataitem) {
html = html + "<option value='" + dataitem.Code + "'>" + dataitem.Name + "</option>";
});
$("#Pro").html(html);
}
});
$("#Pro").change(function () {
var code = $("#Pro").find("option:selected").val();
$.ajax({
type: "get",
contentType: 'text/json',
url: "/common/ReadSecond",
dataType: "json",
data: { parentId: code, level: 2 },
success: function (data) {
var html = "<option value='0'>地级市</option>";
$.each(data, function (i, dataitem) {
html = html + "<option value='" + dataitem.Code + "'>" + dataitem.Name + "</option>";
});
$("#city").html(html);
$("#area").html("<option value='0'>市县级市</option>");
}
});
});
$("#city").change(function () {
var code = $("#city").find("option:selected").val();
$.ajax({
type: "get",
contentType: 'text/json',
url: "/common/ReadSecond",
dataType: "json",
data: { parentId: code, level: 3 },
success: function (data) {
var html = "<option value='0'>市县级市</option>";
$.each(data, function (i, dataitem) {
html = html + "<option value='" + dataitem.Code + "'>" + dataitem.Name + "</option>";
});
$("#area").html(html);
}
});
}); }; })(jQuery);

  

jq实现地址级联效果的更多相关文章

  1. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  2. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. JavaScript实现省市级联效果实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. javascript中的省市级联效果

    学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...

  6. 用扩展方法实现DevExpress-GridControl级联效果

    首先,让我们先回顾下.Net中扩展方法的特征: 1.  必须在一个非嵌套.非泛型的静态类中: 2.  至少有一个参数(this 作前缀的参数): 3.  第一个参数必须附加this做前缀: 4.  第 ...

  7. WPF MVVM模式下ComboBox级联效果 选择第一项

    MVVM模式下做的省市区的级联效果.通过改变ComboBox执行命令改变市,区. 解决主要问题就是默认选中第一项 1.首先要定义一个属性,继承自INotifyPropertyChanged接口.我这里 ...

  8. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

  9. Next Cloud通过修改数据库表,达到替换文件而不改变分享的链接地址的效果,以及自定义分享链接地址

    Next Cloud如何通过修改数据库表,达到替换文件而不改变分享的链接地址的效果,以及自定义分享的链接地址 本文首发于我的个人博客:https://chens.life/nextcloud-chan ...

随机推荐

  1. Delphi下使用OpenOffice+JodConverter+SWFtools进行文件转换

    目的:office文件转换为PDF或SWF,最终可使用Flexpaper调用adobe flash player进行浏览 放弃两个文件转换工具: 1.FlashPaper,转换出的文件由于自带工具栏, ...

  2. android 使用虚拟机安装apk(图文教程)(转)

    1.启动虚拟机 2.我的android sdk在“E:\android\android开发环境\android SDK\platform-tools”把要安装的apk复制到这个根目录(和adb.exe ...

  3. JS获得月最后一天和js得到一个月最大天数

    <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title ...

  4. 20151007kaggle Titanic心得

    Titanic是kaggle上一个练手的比赛,kaggle平台提供一部分人的特征,以及是否遇难,目的是预测另一部分人是否遇难.目前抽工作之余,断断续续弄了点,成绩为0.79426.在这个比赛过程中,接 ...

  5. Visual Studio Profiler 跟踪检查每个exe dll 性能 执行时间 CPU占用情况的方法

  6. USB枚举过程(1)

    总的过程 ① host检测到device,reset 获取设备描述符 host发获取设备描述符请求 ->setup ->data0 <-ack Divice 返回设备描述符 -> ...

  7. web.xml 详解

    http://xmlns.jcp.org/xml/ns/javaee 重定向为 http://www.oracle.com/webfolder/technetwork/jsc/xml/ns/javae ...

  8. java懒汉式单例遇到多线程

    单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 在计算机系统中,线程池.缓存.日志对象.对话框.打印机.显卡的驱动程序对象常被设计成单例.这些应用都或多或少具有资源管理器的功 ...

  9. mac 开发必备软件(不断update ing...)

    整理下mac环境下, 开发必备的一些软件吧, 由于不断要更新ing, 用到啥就写啥~球轻拍 1.host 绑定切换神器 a.gas mask : 只能切换单个自定义的host文件 b.ihosts(推 ...

  10. Javascript(JS)对Cookie的读取、删除、写入操作帮助方法

    var CookieUtils = { get: function (name) { var cookieName = encodeURIComponent(name) + '=', cookieSt ...