jQuery+JSON三级联动效果，通用

最新推荐文章于 2024-07-26 03:31:50 发布

xgh_2012

最新推荐文章于 2024-07-26 03:31:50 发布

阅读量3.8k

点赞数

分类专栏：资料文章标签： jquery 三级联动

本文链接：https://blog.csdn.net/xgh_2012/article/details/49334071

版权

资料专栏收录该内容

10 篇文章 0 订阅

订阅专栏

http://www.helloweba.com/view-blog-188.html

基于此篇文章，修改一些源代码，可实现下拉1-3级联动，其中option中 value=id,text=name

chrome 本地测试，url:"js/json.min.js" 这种方式不支持，直接写json是支持的

1、html源码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ajax,jquery,三级联动" />
<title>jQuery+JSON三级联动效果</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.threeselect.js"></script>
<script type="text/javascript">
$(function(){
    $("#city_1").citySelect({
        url:"js/json.min.js",//必选 （可以是文件，也可以是json）
        frist:'',//可选
        secend:'',//可选
        third:'',//可选
        class_first:'prov',//第一个select classname  //必选
        class_secend:'city',//第二个select classname //可选（只需要一级 此选项不填）
        class_third:'dist',//第三个select classname  //可选（只需要二级 此选项不填）
        first_children:"cityitylist",//一级 //必选
        secend_children:"city",//二级  //可选 （只需要一级 此选项不填）
        third_children:"dist",//三级  //可选（只需要二级 此选项不填）
        nodata:"none", //可选
        required:true //可选
    });
    
    $("#city_2").citySelect({
        url:"js/json.min.js",
        frist:'',
        secend:'',
        third:'',
        class_first:'prov',//第一个select classname
        class_secend:'city',//第二个select classname
        class_third:'dist',//第三个select classname
        first_children:"cityitylist",//一级
        secend_children:"city",//二级
        third_children:"dist",//三级
        nodata:"hidden",
        required:false
    }); 
    
    $("#game").citySelect({
        url:{"list":[{"id":1,"name":"1区","child":[{"id":1,"name":"1服","children":[{"id":1,"name":"test"}]},{"id":2,"name":"2服"}]},{"id":2,"name":"2区","child":[{"id":1,"name":"1服"},{"id":2,"name":"2服"}]}]},
        frist:'',
        secend:'',
        third:'',
        class_first:'qu',//第一个select classname
        class_secend:'fu',//第二个select classname
        class_third:'user',//第三个select classname
        first_children:"list",//一级
        secend_children:"child",//二级
        third_children:"children",//三级
        nodata:"",
        required:false
    });
    
});
</script>
</head>

<body>

<div id="main">
  <div class="demo">    
      <h3>设置省份、城市、地区（县）的默认值</h3>
    <p>二级联动</p>
      <div id="city_1">
          <select class="prov"></select> 
        <select class="city" disabled="disabled"></select>
    </div>
    <p>三级联动</p>
    <div id="city_2">
          <select class="prov"></select> 
        <select class="city" disabled="disabled"></select>
        <select class="dist" disabled="disabled"></select>
    </div>
  </div>
  
  <div class="demo">
      <h3>自定义游戏服务区选项</h3>
      <div id="game">
          <select class="qu"></select>
        <select class="fu" disabled="disabled"></select>
        <select class="user" disabled="disabled"></select>
    </div>
  </div>
</div>
</body>
</html>

2、js源码：

/*
Ajax 三级联动

settings 参数说明
-----
url:数据josn文件路径,也可以是json数据 //必须

frist:默认第一个值
secend:默认第二个值
third:默认第三个值

class_first:第一个选择框的class name //必须
class_secend:第二个选择框的class name //必须
class_third:第三个选择框的class name //必须

first_children:第一层字段
secend_children:第二个选择框与第一个选择框关联字段
third_children:第三个选择框与第二个选择框关联字段

required:必选项
nodata:无数据状态
------------------------------ */
(function($){
	$.fn.citySelect=function(settings){
		if(this.length<1){return;};
		
		// 默认值
		settings=$.extend({
			url:"",
			frist:null,
			secend:null,
			third:null,
			class_first:null,
			class_secend:null,
			class_third:null,
			first_children:"first_children",
			secend_children:"secend_children",	
			third_children:"third_children",	
			nodata:null,
			required:true
		},settings);

		var box_obj=this;
		var frist_obj=box_obj.find("."+settings.class_first);
		var secend_obj=box_obj.find("."+settings.class_secend);
		var third_obj=box_obj.find("."+settings.class_third);
		var frist_val=settings.first;
		var secend_val=settings.secend;
		var third_val=settings.third;
		var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>";
		var node_first = settings.first_children;
		var node_secend = settings.secend_children;
		var node_third = settings.third_children;
		var json_data;
		
		// 赋值第二个选择框
		var secendStart=function(){
			var frist_id=frist_obj.get(0).selectedIndex;
			
			if(!settings.required){
				frist_id--;
			};
			secend_obj.empty().attr("disabled",true);
			third_obj.empty().attr("disabled",true);

			if(frist_id<0||typeof(json_data[node_first][frist_id][node_secend])=="undefined"){
				if(settings.nodata=="none"){
					secend_obj.css("display","none");
					third_obj.css("display","none");
				}else if(settings.nodata=="hidden"){
					secend_obj.css("visibility","hidden");
					third_obj.css("visibility","hidden");
				};
				return;
			};
			
			// 遍历赋值第二下拉列表
			temp_html=select_prehtml;
			$.each(json_data[node_first][frist_id][node_secend],function(i,secend){
				temp_html+="<option value='"+secend.id+"'>"+secend.name+"</option>";
			});
			secend_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
			thirdStart();
		};

		// 赋值第三个选择框
		var thirdStart=function(){
			var frist_id=frist_obj.get(0).selectedIndex;
			var secend_id=secend_obj.get(0).selectedIndex;
			if(!settings.required){
				frist_id--;
				secend_id--;
			};
			third_obj.empty().attr("disabled",true);

			if(frist_id<0||secend_id<0||typeof(json_data[node_first][frist_id][node_secend][secend_id][node_third])=="undefined"){
				if(settings.nodata=="none"){
					third_obj.css("display","none");
				}else if(settings.nodata=="hidden"){
					third_obj.css("visibility","hidden");
				};
				return;
			};
			
			// 遍历赋值第三下拉列表
			temp_html=select_prehtml;
			$.each(json_data[node_first][frist_id][node_secend][secend_id][node_third],function(i,third){
				temp_html+="<option value='"+third.id+"'>"+third.name+"</option>";
			});
			third_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
		};

		var init=function(){
			// 遍历赋值第一下拉列表
			temp_html=select_prehtml;
			$.each(json_data[node_first],function(i,first){
				temp_html+="<option value='"+first.id+"'>"+first.name+"</option>";
			});
			frist_obj.html(temp_html);

			// 若有传入第一、第二的值，则选中。（setTimeout为兼容IE6而设置）
			setTimeout(function(){
				if(settings.first!=null){
					frist_obj.val(settings.first);
					secendStart();
					setTimeout(function(){
						if(settings.secend!=null){
							secend_obj.val(settings.secend);
							thirdStart();
							setTimeout(function(){
								if(settings.third!=null){
									third_obj.val(settings.third);
								};
							},1);
						};
					},1);
				};
			},1);

			// 选择第一选择框时发生事件
			frist_obj.bind("change",function(){
				secendStart();
			});

			// 选择第二选择框时发生事件
			secend_obj.bind("change",function(){
				thirdStart();
			});
		};

	
		// 设置json数据
		if(typeof(settings.url)=="string"){
			$.getJSON(settings.url,function(json){
				json_data=json;		
				init();
			});
		}else{
			json_data=settings.url;
			init();
		};
	};
})(jQuery);

3、json格式

{"cityitylist":[{"id":1,"name":"北京","city":[{"id":2,"name":"东城区","dist":[{"id":1001,"name":"测试县1"},{"id":1002,"name":"测试县2"},{"id":1003,"name":"测试县3"},{"id":1004,"name":"测试区"}]},{"id":3,"name":"西城区"},{"id":4,"name":"崇文区"},{"id":5,"name":"宣武区"},{"id":6,"name":"朝阳区"},{"id":7,"name":"丰台区"},{"id":8,"name":"石景山区"},{"id":9,"name":"海淀区"},{"id":10,"name":"门头沟区"},{"id":11,"name":"房山区"},{"id":12,"name":"通州区"},{"id":13,"name":"顺义区"},{"id":14,"name":"昌平区"},{"id":15,"name":"大兴区"},{"id":16,"name":"平谷区"},{"id":17,"name":"怀柔区"},{"id":18,"name":"密云县"},{"id":19,"name":"延庆县"}]},{"id":20,"name":"天津","city":[{"id":21,"name":"和平区"},{"id":22,"name":"河东区"},{"id":23,"name":"河西区"},{"id":24,"name":"南开区"},{"id":25,"name":"河北区"},{"id":26,"name":"红挢区"},{"id":27,"name":"滨海新区"},{"id":28,"name":"东丽区"},{"id":29,"name":"西青区"},{"id":30,"name":"津南区"},{"id":31,"name":"北辰区"},{"id":32,"name":"宁河区"},{"id":33,"name":"武清区"},{"id":34,"name":"静海县"},{"id":35,"name":"宝坻区"},{"id":36,"name":"蓟县"}]}]}