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

来源：互联网发布：ubuntu 16.04安装jdk 编辑：程序博客网时间：2024/05/18 20:13

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":"蓟县"}]}]}

0 0