/** * LinkedSelect: 联动下拉框控件,支持N级联动。 * 根据每个Select的定义中的url和id为Select做初始化,后台返回的数据为[{value:"",label:""},{value:"",label:""}]形式的数组json * @author senton * @version 1.0 * * 以选国家、省、市的联动为例,调用示例如下: * <pre> * // 声明一个select变量 * var select = new LinkedSelect(); * // 调用selct的init()方法,注意,该方法的参数是一个数组,用[]括起来,每个select的定义用{}括起来,多个select定义之间以,分割 * select.init([ * { * id:"country", * url:"获取country列表的url", * nullable:false, * defaultValue:2 * }, * { * id:"province", * url:"获取province列表的url", * nullable:false * }, * { * id:"city", * url:"获取city列表的url", * nullable:false * } * ]); * </pre> */ /** * 定义一个LinkedSelect函数 */ function LinkedSelect(){ return this; } /** * LinkedSelect的初始化方法 * @param allSelectInputs 所有的需要联动显示的下拉框,是一个数组。 * @returns */ LinkedSelect.prototype.init = function(allSelectInputs){ // 定义一个内部方法,用于加载一个下拉框,参数: // allSelectInputs:所有的下拉框定义 // parentId: 上一个被选中的ID,即<option>的value属性值 // currentIndex: 要初始化的下拉框在allSelectInputs中的索引 initNextSelect = function(allSelectInputs, parentId, currentIndex){ // 如果没有allSelectInputs值或者allSelectInputs的长度小于等于currentIndex,说明没有需要初始化的下拉框了,就返回 if(!allSelectInputs || allSelectInputs.length <= currentIndex){ return; } // 取出当前需要初始化的select的定义 var currentSelect = allSelectInputs[currentIndex]; // 清空currentSelect的option $("#"+currentSelect.id).empty(); // 如果还有下一个,则为当前的Select加上onchange事件 if(allSelectInputs.length > currentIndex + 1){ $("#"+currentSelect.id).unbind("change"); $("#"+currentSelect.id).bind("change", function(){ initNextSelect(allSelectInputs, $(this).val(), currentIndex + 1); }); } // 如果不是第一个,则需要判断parentId是否为空,如果为空,则递归清空后面的所有下拉框 if(currentIndex != 0){ if(!parentId || parentId == ''){ $("#"+currentSelect.id).append("<option value=''></option>"); initNextSelect(allSelectInputs, $("#"+currentSelect.id).val(), currentIndex + 1); return; } } // 如果不为空,则根据parentId取出所有的SelectItem初始化currentSelect $.post(currentSelect.url, { parentId:parentId }, function(data){ // 如果currentSelect在被定义时nullable为true,则说明可以为空,在第一个加上一个空的option if(currentSelect.nullable){ $("#"+currentSelect.id).append("<option value=''></option>"); } // 取出所有的selectItem加到currentSelect上 $.each(data, function (index, selectItem) { // 如果currentSelect在被定义时的defaultValue等于当前selectItem的值,则选中它 if(selectItem.value == currentSelect.defaultValue){ $("#"+currentSelect.id).append("<option selected='selected' value='" + selectItem.value + "'>" + selectItem.label + "</option>"); } else { $("#"+currentSelect.id).append("<option value='" + selectItem.value + "'>" + selectItem.label + "</option>"); } }); // 初始化完毕后,取出当前currentSelect选中的值,作为parentId初始化下一个select initNextSelect(allSelectInputs, $("#"+currentSelect.id).val(), currentIndex + 1); },"json" ); }; // 调用initNextSelect,启动第一个下拉框的加载 initNextSelect(allSelectInputs, "", 0); };
相关推荐
Distpicker和json格式数据的省市区三级级联代码,以及部分js代码。
jquery省市区三级级联代码,如何使用:具体请看源码。
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人
SSH + dwr 实现三级级联 原代码下载
此为完整的省市区三级级联 完全用js编写
高德地图三级级联,只保留了id和父id以及地区名,如需要经纬度坐标自己改代码即可,附带获取高德地图区域的代码和以及全国省市县数据sql文件
网页前端代码,实现了 省/市/县 三级级联
多年前做的一个asp语言的三级级联菜单,直接从数据库中读取三级菜单,很实用。
关于城市级联的详细信息数据库表,存放到一张表中,有两种类型的数据表,根据个人爱好选择自己想要的。
省市县三级级联的xml文件。和读取xml文件的代码。很好用的
一个优秀的ajax实现的三级级联源代码,如果您需要实现级联,可以作为您参考的标准!希望对您有用!
支持无限级联,jquery框架 数据库 json格式
jQuery世界城市三级联动下拉选择代码 jQuery世界城市三级联动下拉选择代码 jQuery世界城市三级联动下拉选择代码
该项目为一个整合hibernate与struts,利用json对象存放临时数据库数据,连接数据的三级联动;改项目使用ajax传递请求连接和参数;数据库结果为三表级联,三表之间依次都是多对一的关系;其中代码核心代码都附有详细...
3级CIC滤波器级联的verilog代码,CIC滤波器主要用于抽取结构,本代码给出了器verilog的源代码,可综合。
现成的省市区三级地区级联json数据,json代码格式工整简明,便于开发者阅读和使用,开箱即用! 现成的省市区三级地区级联json数据,json代码格式工整简明,便于开发者阅读和使用,开箱即用!
这是一个地址级联的JS代码,下载后可以仿写完成第三极地址。
实现Ajax实现省市区三级级联,需要Java解析json技术 整体Demo下载地址如下: 点我下载 address.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here&...
Ajax动态级联树源代码 Ajax动态级联树源代码
超漂亮的基于jquery的H5省市区县三级地区级联选择菜单,适合wap、html5页面使用。无用代码全部剥离干净。界面漂亮、兼容性好。