jquery无限级联下拉菜单的简单示例演示

该示例讲述了jquery无限级联下拉菜单的代码以及jquery无限级联下拉菜单的实现思路。分享给大家参考。具体如下：

最终效果图：

因为是级联的，所以数据必须是树形结构。这里的测试数据如下：

看效果图：

1.效果图一：

2.渲染2:

3.渲染3:

从图中可以看出，下拉框的数量不是写死的，而是动态加载的。每当下拉框的选择发生变化时，就会发送一个ajax请求来成功返回json格式的数据。当返回的数据不为空时(即有子节点时)，页面会增加一个下拉框，如果不为空，则不增加下拉框。

插件实现代码如下：

（函数($){ $ .fn。cascadingsele=函数（选项){ //默认参数设置定义变量设置={ url: '/Handler.ashx '，//请求路径数据：“0”，//初始值（字符串格式)split: '，'，//分割符cssName: 'select '，//样式名称val: 'id '，//选项值=' id '名称/选项text: 'name '，//选项值=' id '名称/选项hiddenName: 'selVal' //隐藏域的名字属性的值} //合并参数如果(选项)$。扩展（设置，选项);//链式原则返回这个。各(函数(){ init($(this)，设置。数据)；/* 初始化@param容器容器对象@param数据初始值*/函数init(容器，数据){ //创建隐藏域对象，并赋初始值var _ input=$(' input type=' hidden ' name=' settings。hiddenname ' '/').附录（容器)。val(设置。数据)；var arr=数据。分割(设置。拆分)；for(var I=0；一、长度；i ) { //创建下拉框创建选择(容器，arr[i]，arr[I 1]| |-1)；} } /* 创建下拉框@param容器容器对象@param parentid父身份号@param id自身身份号*/函数创建选择(容器，parentid，id) { //创建挑选对象，并将挑选对象放入容器内var _select=$('select/select ').附录（容器)。添加CLaSS(设置。CSS name)；//如果parentid为空，则_parentid值为0 var _ parentid=parentid | | 0//发送创建交互式、快速动态网页应用的网页开发技术请求，返回的数据必须为json格式$.getJSON(settings.url，{ parentid: _parentid }，函数(数据){ //添加子节点选项附加选项(容器，_选择，数据)。val(id | |-1)})；} /* 为下拉框添加选择权子节点@param容器容器对象@param select下拉框对象@param数据子节点数据（要求数据为json格式)*/函数addOptions(容器、选择、数据){ select。追加($('选项值='-1 '=请选择=/option ')；for(var I=0；一。数据。长度；I){ select。追加($('选项值=')数据[I][设置。val]' ' '数据[I][设置。text]'/option ')；} //为挑选绑定变化事件select.bind('change '，function () { _onchange(container，$(this)，$(this)).val())})；返回选择；} /*选择的变化事件函数@param容器容器对象@param select下拉框对象@param id当前下拉框的值*/function _onchange(容器，选择，id){ var nextAll=select。next all(' select ')；//如果当前挑选对象的值是空或-1(即：==请选择==),则将其后面的挑选对象全部移除if(！id | | id=='-1 '){ nextall。移除()；} $.getJSON(settings.url，{ parentid: id }，function(data){ if(data。长度0){ var _ html=$(' select class='设置。CSS名称' '/select ')；var _select=addOptions(容器，_html，数据);//判断当前挑选对象后面是否跟有挑选对象如果(下一个。长度1){选择。在(_ select)之后；//没有则直接添加} else { next all。移除()；//有则先移除再添加选择。在(_ select)之后；} } else { nextall。移除()；//没有子项则后面的挑选全部移除} saveVal(容器);//进行数据保存，此方法必须放在回调函数里面});//saveVal(容器);//如果放在这里，则会出现bug } /*将选择的值保存在隐藏域中，用于表单提交保存@param容器容器对象*/函数saveVal(容器){ var arr=new Array()；由…改编push(0)；//为数组到达)添加元素0,父节点从0开始，所以添加0 $("选择",容器)。每个（函数(){ if ($(this)).val() 0) { arr.push($(this).val())；//获取容器下每个挑选对象的值，并添加到数组arr } })；//为隐藏域对象赋值$('输入[name=]设置。hiddenname ' ']'，容器)。瓦尔(arr。加入(设置。拆分))；} });} })(jQuery)；注释我已经尽量写的详细了，但还是要针对一些知识点进行讲解。

1.我这里的后台语言是C#，所以你看到的请求路径是这样的(url:'/Handler.ashx ')。使用其他语言没有问题，但是ajax请求返回的数据必须是json格式。

2.在初始化方法init()中，我们将一个隐藏字段放入容器中。这个隐藏字段用于存储值，我们通过saveVal()方法为它赋值。我们之所以要添加隐藏字段，是因为选中的数据最终会保存到数据库中，所以会有表单提交操作，所以需要添加隐藏字段。

3.默认参数设置中的拆分分隔符。此处使用逗号(，)，您可以使用其他逗号代替，如(-)或(|)。主要用于拆分合并所有下拉框的值。

拆分主要是在初始化(init)的时候，比如你给的初始值(数据)不是0，而是0，1，4，然后就会被拆分，一个个执行create下拉框方法createSelect()。

组合主要是给隐藏字段赋值时，将每个下拉框的值拼接成带分隔符的字符串，再赋值给隐藏字段。

4.{默认参数设置中的val :“id”，text :“name”}。它们对应于您返回的json对象中的相应属性名。

5.在_onchange()方法中，存在写入saveVal()的执行位置的问题。在回调函数之外编写时出现bug的原因是$。默认情况下，getJSON()是异步的，saveVal()方法在回调方法完成之前执行。我们来看看bug :

此时，隐藏字段的值是错误的，正确的值应该是0，1，5。SaveVal()是在回调函数执行之前执行的，也就是说，没有执行nextAll.remove()的时候。

DEMO的Html部分代码：

html head title/title style type=' text/CSS ' * { margin :0；划水：0；} # box { width:500pxmargin:100px auto} .选择{ width:120px高度：30 px；右边距：5 px；}/style/head dy！-container-div id=' box '/div script src=' http 3360 script/jquery-1 . 4 . 1 . min . js ' type=' text/JavaScript '/script script src=' http : script/jquery . simple . cascadingsele . js ' type=' text/JavaScript '/script type=' text/JavaScript ' $(' # box ')。cascadingsele({ data : ' 0，1，4 ' })；//将初始值设置为0，1，4 /script/body/html就是jquery的全部内容，达到无限级联下拉菜单的效果。希望对大家的学习有帮助。