java的select联动_[Java教程]jquery select三级联动

[Java教程]jquery select三级联动

0 2015-09-13 15:00:04

需求：

对地区进行选择，选择相应的省，就会出现相应范围的市，然后出现相应的范围的县区；如果县不存在，就不现实，自我要求是自己写个简单的插件，方便以后调用；

逻辑：

1.通过div的类名来获取，其下的select标签；

2.通过声明临时变量，用来保存option内容，并通过$.each()来遍历json然后添加到select中；

3.如果某个市没有县，就先判断json中有没记录，如果没有就不现实，有就继续执行下面代码；

4.用change事件来控制三个selet之间的联系；

5.通过ajax $.getJSON，来触发省份事件，然后通过省份select的改变，来触发市区，以此类推；

实现：

json数据[{"p":"江西省","c":[{"ct":"南昌市","d":[{"dt":"西湖区"},{"dt":"东湖区"},{"dt":"高新区"}]},{"ct":"赣州市","d":[{"dt":"瑞金县"},{"dt":"南丰县"},{"dt":"全南县"}]}]},{"p":"北京","c":[{"ct":"东城区"},{"ct":"西城区"}]},{"p":"河北省","c":[{"ct":"石家庄","d":[{"dt":"长安区"},{"dt":"桥东区"},{"dt":"桥西区"}]},{"ct":"唐山市","d":[{"dt":"滦南县"},{"dt":"乐亭县"},{"dt":"迁西县"}]}]}]

html代码

select

请选择请选择请选择

jquery插件

/** * * @authors Your Name (you@example.org) * @date 2015-09-13 01:54:25 * @version $Id$ */(function($){$.fn.areaSelect = function(options){var settings = $.extend({"jsonUrl":"json"},options); return this.each(function(){ var url = options.jsonUrl;var addJson;var tHtml = "";var op = $(this).find(".province");var oc = $(this).find(".city");var od = $(this).find(".district");//初始化var province = function(){ $.each(addJson,function(i,province){ tHtml += ""+province.p+""; }); op.html(tHtml); city();}var city = function(){var tHtml="";var n = op.get(0).selectedIndex;$.each(addJson[n].c,function(i,city){ tHtml += ""+city.ct+"";});oc.html(tHtml);district();}var district = function(){var tHtml="";var n = op.get(0).selectedIndex; var m = oc.get(0).selectedIndex; if(typeof (addJson[n].c[m].d) == "undefined"){ od.css("display","none") }else{ od.css("display","inline"); $.each(addJson[n].c[m].d,function(i,district){ tHtml += ""+district.dt+"" }); od.html(tHtml); } }op.change(function(){city();})oc.change(function(){district()});$.getJSON(settings.jsonUrl,function(data){addJson = data;province()}) })}})(jQuery)

转载自：http://www.cnblogs.com/afuge/archive/2013/06/08/3127172.html  有修改！

本文网址：http://www.shaoqun.com/a/143213.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

jquery

0