Asp.Net教程,WinForm教程,Asp.Net MVC,vs2008教程,vs2010教程,Silverlight技术,源码下载,Asp.Net视频教程
全站热门标签
vs2010 Silverlight 存储过程 水晶报表 ADO.NET JavaScript LINQ AjaxPro DataGridView 面向对象 Extjs GridView XML DevExpress HTML教程 Oracle jQuery 分页 GDI+ Visual C++2010 MySQL Office2010 WPF MVC Dojo WCF4.0 VB.NET Sql2005 textbox cookie WCF WinForm Discuz!NT SQL经典语句 T-SQL checkbox ASPxGridView F# asp.net SQL VS2008新特性 DropDownList Access TreeView Ajax VS2008 页面执行时间 Flex 字符串 回调 VB2005 DataSet C#时间 ASP.NET性能优化 用户在线检测 动画
jQuery JavaScript Html/Css Flex Dojo ExtJSAJAX
当前位置: 主页 > Web编程 > AJAX >

JQuery实现省市区三级联动

时间:2009-10-11 11:59来源:未知 作者:admin 点击:

js内容:
var j = jQuery.noConflict();
var prov="";
var city="";
var area="";
j(function(){
    j.get("/Js/Message/address.xml",function(xml){
            j("body").data("xml",xml);
            j("#province_city_area").append("<select id='_province'></select>&nbsp;<select id='_city'></select><select id='_area'></select>");
            j("province",xml).each(function(){
                if(j(this).attr("province")==prov)
                    j("#_province").append("<option value="+j(this).attr("provinceID")+" selected>"+j(this).attr("province")+"</option>");
                else
                j("#_province").append("<option value="+j(this).attr("provinceID")+">"+j(this).attr("province")+"</option>");
            });//初始省

            LoadCity(j("#_province").val().substr(0,3),xml); //初始市 
            LoadArea(j("#_city").val().substr(0,4),xml); //初始区
            
            j("#_province").change(function(){
                j("#_city").empty();
                var Pvalue = j(this).val().substr(0,3);
                if(j("province[provinceID^="+Pvalue+"] City",xml).length==0){
                    j("#_city").hide();
                    j("#_area").remove();
                    return;
                }else
                    j("#_city").show();
                LoadCity(Pvalue,xml);
                LoadArea(j("#_city").val().substr(0,4),xml);
            });
            
            j("#_city").change(function(){
                LoadArea(j(this).val().substr(0,4),xml);
            });
        }
    ); 
    
    function LoadCity(Pvalue,xml){
        j("#_city").empty();
        j("province[provinceID^="+Pvalue+"] City",xml).each(function(){
            if(j(this).attr("City")==city)
                j("#_city").append("<option value="+j(this).attr("CityID")+" selected>"+j(this).attr("City")+"</option>");
            else
            j("#_city").append("<option value="+j(this).attr("CityID")+">"+j(this).attr("City")+"</option>");
        });
    } 
    
    function LoadArea(Cvalue,xml){
        j("#_area").remove();
        j("#_city").after("&nbsp;<select id=_area></select>");
        j("City[CityID^="+Cvalue+"] Piecearea",xml).each(function(){
            if(j(this).attr("Piecearea")==area)
                j("#_area").append("<option selected>"+j(this).attr("Piecearea")+"</option>");
            else
            j("#_area").append("<option>"+j(this).attr("Piecearea")+"</option>");
        });
    }             
});

j.extend({
    Jprov: function(provalue){
        if(provalue==null)
            return j("#_province option:selected").text();
        else{
            prov = provalue;
            j("#_province option").each(function(){
                if(j(this).text()==provalue){
                    j(this).attr("selected",true);
                    j("#_province").trigger("change");
                }
            });
        }    
    },
    Jcity: function(cityvalue){
        if(cityvalue==null)
            return j("#_city option:selected").text();
        else{
            city = cityvalue;
            j("#_city option").each(function(){
                if(j(this).text()==cityvalue){
                    j(this).attr("selected",true);
                    j("#_city").trigger("change");
                }
            });
        }
    },
    Jarea: function(areavalue){
        if(areavalue==null)
            return j("#_area option:selected").text();
        else{
            area = areavalue;
            j("#_area option").each(function(){
                if(j(this).text()==areavalue){
                    j(this).attr("selected",true);
                }
            });
        }
    }
});

 
html代码:
<div id="province_city_area"></div>
 
 调用:

取值:
j.Jprov();
j.Jcity();
j.Jarea();

赋值:
j.Jprov("广东省");
j.Jcity("深圳市");
j.Jarea("宝安区");
 
附件:

/uploads/soft/091011/1-091011120128.rar

(责任编辑:admin)
Tags:jQuery
责任编辑:admin
返回顶部
------分隔线----------------------------
推荐内容
骆驼户外男 真皮磨砂日常休闲鞋 低帮 2011秋冬新款 专柜正品特价 骆驼户外男 真皮磨砂日常休闲鞋 低帮 2011秋冬新款 专柜正品特价
  • JQuery RadioButtonList

    首先介绍程序规则: 1.对以下的选择进行检查,检查是否全部选中 2,所谓的全部选中是指,一行中三个radiobutton必须有一个radiobutton被选中。...

  • JQuery实现智能输入提示(仿机票预订网站)

    最近在研究JQuery框架,JQuery是一套很优秀的JS框架,可以实现很多美观实用的控件。今天给大家推荐一个智能提示的空间,是模仿现在很多机票预订网站的城市智...

  • jQuery得到ashx返回的JSON格式的DataSet的方法

    jQuery得到ashx返回的JSON格式的DataSet的方法...

  • JQuery点击行(tr)实现checkBox选中,反选时移除和添加样式

    用到了三元运算符,和一个自定义的函数。 点击行时效果代码: $( tr ).live( click , function (){ if ($( this ).h...

  • 用jQuery模仿新浪微博时间组件

    废话不多说,实现原理主要是处理table,生成tr td,其中最重要的是如何找出每月第一天是星期几,然后就能对应出这个月的余下天数. 首先,说下有些人说这是重复...

  • Jquery之Ajax运用_学习运用篇

    JQuery中Ajax的运用相信很多人都已熟悉,本文主要是记录下个人实践中的应用知识,旨在加强记忆。 还是先说一些 基础知识: 语法:$.ajax({optio...

  • JQuery单选按钮和多选按钮状态判断

    function check_required() { var valid = true; var required=new Array; $(.require...

  • jQuery AJAX的小应用——手机号码归属地查询

    jQuery AJAX的小应用手机号码归属地查询 想测试下jQuery调用个第三方的WebService,利用 jQuery 的 $.get(url, data...

  • 多标签折页(jQuery示例)

    现在的垃圾留言越来越智能,并且从留言内容几乎看不出来是垃圾留言,而大量的垃圾留言会导致文章可读性下降,并可能会被搜索引擎惩罚,经过一段时间的分析和思考,我发现一...

  • JQuery 文本框高亮显示插件

    JQuery 中没有这个方法,自己今天写了一个Plugin,把代码贴出来分享一下; 代码如下: jquery-highlight.js /* descripti...

  • jquery的select插件

    Jquery是可以操作select表单控件的,比较反锁,下面是收集来的一个插件,还不错,能满足基本的选择。 可以使用这样的引入: type=text/javas...

  • 使用Jquery完成图片的预加载

    // 定义预加载图片列表的函数(有参数) jQuery.preloadImages = function (){ // 遍历图片 for ( var i = 0...

  • jQuery在asp.net中实现图片自动滚动

    时间真快,不知不觉12月已经过了一半了,新的一年即将到来。有段时间没写东西了,技术这东东天天都在更新,天天都是一个新面孔,如果不坚持学习肯定就会落在队尾。要想跟...

  • JQuery遍历表格指定列

    script type=text/javas cript $(function(){ $(#tb tr:gt(0)).each(function(){ var ...

  • AJAX无刷新下拉框联动

    AJAX无刷新下拉框联动的简单示例,分别使用了AJAX组件和xmlHttp异步刷新两种方式。 前台代码: %...@ Page Language=C# Auto...