当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » JavaScript  » 网页设计与交互
0xTang

Jquery实现省市区联动

0xTang 发布于 2011年08月17日 23时, 36评/20960阅
分享到: 
收藏 +0
1
利用jquery实现从xml读取省市区信息联动插件。
备注:代码中是读取xml/province_city.xml,视情况自行修改。
标签: jQuery 精华

代码片段(2) [全屏查看所有代码]

1. [代码][JavaScript]代码     跳至 [1] [全屏预览]

/**
 * jQuery :  省市县联动插件
 * @author   kxt
 * @example  $("#test").province_city_county();
 */
$.fn.province_city_county = function(v_province,v_city,v_county){
	var _self = this;
	//插入3个空的下拉框
	//_self.append("<select id='province' name='province'></select>");
	//_self.append("<select id='city' name='city'></select>");
	//_self.append("<select id='county' name='county'></select>");
    _self.html("<select id='province' name='province' style='width: 100px'></select>" +
    		"<select id='city' name='city' style='width: 100px'></select>" +
    		"<select id='county' name='county' style='width: 100px'></select>");
	//分别获取3个下拉框
	var sel1 = _self.find("select").eq(0);
	var sel2 = _self.find("select").eq(1);
	var sel3 = _self.find("select").eq(2);
	
	//定义3个默认值
	_self.data("province",["请选择", ""]);
	_self.data("city",["请选择", ""]);
	_self.data("county",["请选择", ""]);
	//默认省级下拉
	if(_self.data("province")){
		sel1.append("<option value='"+_self.data("province")[1]+"'>"+_self.data("province")[0]+"</option>");
	}
	//默认城市下拉
	if(_self.data("city")){
		sel2.append("<option value='"+_self.data("city")[1]+"'>"+_self.data("city")[0]+"</option>");
	}
	//默认县区下拉
	if(_self.data("county")){
		sel3.append("<option value='"+_self.data("county")[1]+"'>"+_self.data("county")[0]+"</option>");
	}
	$.get('xml/province_city.xml', function(data){
		var arrList = [];
		$(data).find('province').each(function(){
			var $province = $(this);
			sel1.append("<option value='"+$province.attr('value')+"'>"+$province.attr('value')+"</option>");
		});
		if(typeof v_province != 'undefined'){
			sel1.val(v_province);
			sel1.change();
		}
	});
	
	//省级联动控制
	var index1 = "" ;
	var provinceValue = "";
	var cityValue = "";
	sel1.change(function(){
		//清空其它2个下拉框
		sel2[0].options.length=0;
		sel3[0].options.length=0;
		index1 = this.selectedIndex;
		if(index1 == 0){	//当选择的为 "请选择" 时
			if(_self.data("city")){
				sel2.append("<option value='"+_self.data("city")[1]+"'>"+_self.data("city")[0]+"</option>");
			}
			if(_self.data("county")){
				sel3.append("<option value='"+_self.data("county")[1]+"'>"+_self.data("county")[0]+"</option>");
			}
		} else{
			provinceValue = $('#province').val();
			$.get('xml/province_city.xml', function(data){
				$(data).find("province[value='"+provinceValue+"'] > city").each(function(){
					var $city = $(this);
					sel2.append("<option value='"+$city.attr('value')+"'>"+$city.attr('value')+"</option>");
				});
				cityValue = $("#city").val();
				$(data).find("city[value='"+cityValue+"'] > county").each(function(){
					var $county = $(this);
					sel3.append("<option value='"+$county.attr('value')+"'>"+$county.attr('value')+"</option>");
				});

                if(typeof v_city != 'undefined'){
                    sel2.val(v_city);
                    sel2.change();
                }

                if(typeof v_county != 'undefined'){
                    sel3.val(v_county);
                }
			});
		}
	}).change();
	//城市联动控制
	sel2.change(function(){
		sel3[0].options.length=0;
		var cityValue2 = $('#city').val();
		$.get('xml/province_city.xml', function(data){
			$(data).find("city[value='"+cityValue2+"'] > county").each(function(){
				var $county = $(this);
				sel3.append("<option value='"+$county.attr('value')+"'>"+$county.attr('value')+"</option>");
			});
            if(typeof v_county != 'undefined'){
            	sel3.val(v_county);
            }
		});
	}).change();
	return _self;
};

2. [文件] province_city.xml ~ 164KB     下载(3435)     [全屏预览]



开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(36)

  • 1楼:sunney888 发表于 2011-08-18 09:31 回复此评论
    还不错数据比较全。至少能找到我家
  • 2楼:0xTang 发表于 2011-08-18 10:02 回复此评论

    引用来自“lisunney”的评论

    还不错数据比较全。至少能找到我家
    哈哈..
  • 3楼:iuhoay 发表于 2011-08-18 13:38 回复此评论
    想想自己写的无限级联,兼容xml、json、ajax...
  • 4楼:天闲 发表于 2011-08-18 14:07 回复此评论
    $("#sheng_list").change(function (){ 
         $("#shi").load("shi.jsp?pid="+$("#sheng_list").find("option:selected").attr("pid"));
     })
  • 5楼:LiuMAKHAN 发表于 2011-08-23 17:08 回复此评论
    brush: js; auto-links: false
  • 6楼:年华 发表于 2011-09-27 11:04 回复此评论
    怎么用啊?
  • 7楼:年华 发表于 2011-09-27 11:04 回复此评论
    怎么用啊?
  • 8楼:andyhuang 发表于 2011-11-15 12:09 回复此评论
    怎么用啊?
  • 9楼:0xTang 发表于 2012-01-07 00:22 回复此评论

    引用来自“andyhuang”的评论

    怎么用啊?
    把里面的JS代码保存成jquery.provincesCity.js,然后把xml文件下载放在xml文件夹里面。大概如下所示:
    js -jquery.provincesCity.js
    xml -province_city.xml
    页面代码:(记得把Jquery的文件也写到header里面去)
    <script type="text/javascript" src="js/jquery.provincesCity.js"></script> <script type="text/javascript">
    $(document).ready(function(){ $("#address").ProvinceCity(); }); });
    </script>
    <div id="address"></div>
  • 10楼:张祥林 发表于 2012-02-16 16:53 回复此评论
    不行呢
  • 11楼:husw 发表于 2012-02-16 18:07 回复此评论
    不错! 可以用,不过楼上的写的代码应该没经过测试吧?   会误导新人的!

    正确的使用方法:
    demo.html
    jquery.provincesCity.js
    jquery-1.3.min.js
    province_city.xml
    以上四个文件,我放在了一起,当然你也可以分开放,只要导入正确的路径即可!

    页面代码 demo.html:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery 三级地市级联菜单_http://www.codefans.net</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery-1.3.min.js"></script>
        <script type="text/javascript" src="jquery.provincesCity.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#address").province_city_county();
            });
        </script>
     
    </head>
    <body>
        <div id="address"></div>
    </body>
    </html>
  • 12楼:vitocl 发表于 2012-02-20 09:39 回复此评论

    怎么在C#后台获取省市区三个值呢?

  • 13楼:wang_june 发表于 2012-02-20 09:42 回复此评论

    引用来自“陈科甫”的评论

    怎么在C#后台获取省市区三个值呢?

    //_self.append("<select id='province' name='province'></select>");
    014 //_self.append("<select id='city' name='city'></select>");

    015 //_self.append("<select id='county' name='county'></select>");

    通过 js id 为 'province' 是省 获取
  • 14楼:vitocl 发表于 2012-02-20 09:42 回复此评论

    当选择省的时候,市和区默认是空白?

  • 15楼:vitocl 发表于 2012-02-20 09:46 回复此评论
    IE和360会出现这种情况,谷歌和FF正常
  • 16楼:wang_june 发表于 2012-02-20 09:47 回复此评论
    没遇到过你说的让种情况
  • 17楼:vitocl 发表于 2012-02-20 10:15 回复此评论
        <script type="text/javascript">
            $(function () {
                $("#address").province_city_county();   
            });
            $(document).ready(function () {
                var prov = $("#province").val;
                     $("#hf1").attr("value",prov);
            });
        </script>
    我好像写错了。
    hf1是body中一个隐藏域控件,不会jq,希望高手指点一下

  • 18楼:林惠阳 发表于 2012-03-15 11:49 回复此评论

    引用来自“陈科甫”的评论

        <script type="text/javascript">
            $(function () {
                $("#address").province_city_county();   
            });
            $(document).ready(function () {
                var prov = $("#province").val;
                     $("#hf1").attr("value",prov);
            });
        </script>
    我好像写错了。
    hf1是body中一个隐藏域控件,不会jq,希望高手指点一下

    $("#hf1").attr("value",prov); 换成$("#hf1").val(prov);
  • 19楼:wang_june 发表于 2012-03-15 12:54 回复此评论

    引用来自“林惠阳”的评论

    引用来自“陈科甫”的评论

        <script type="text/javascript">
            $(function () {
                $("#address").province_city_county();   
            });
            $(document).ready(function () {
                var prov = $("#province").val;
                     $("#hf1").attr("value",prov);
            });
        </script>
    我好像写错了。
    hf1是body中一个隐藏域控件,不会jq,希望高手指点一下

    $("#hf1").attr("value",prov); 换成$("#hf1").val(prov);
    可以
  • 20楼:来电以后 发表于 2012-03-30 13:40 回复此评论
    怎么在外部定义它,自动选择某一省市区?谢谢
开源从代码分享开始 分享代码
0xTang的其它代码 全部(2)...