手机版

使用js jquery实现无限极联动

时间:2021-11-19 来源:互联网 编辑:宝哥软件园 浏览:

今天工作需要写树形的联动,于是写了个可扩展的无限极联动下拉选项代码写的比较凌乱先标记有空再整理

随便截个图!先贴数据库idcategory_name分类名pid父分类idorders排序122223331012222211111124444411052222116222211113332013555555120页面代码用的自作聪明的人复制代码代码如下: div id=' select ' select name=' category _ 1 ' id=' category _ 1 ' onChange=' change '(' category _ 1 ');'选择权请选择分类/option!-{ foreach from=$ gallery类别item=category }-选项值=' { $ category。id } ' { $ category。category _ name }/选项!-{/foreach }-/select/div $图库类别去数据的服务器端编程语言(专业超文本预处理器的缩写)代码为复制代码代码如下' :美元sql='从yl _ gallery _类别中选择*其中PID=0 ';$ GalleryCategory=$ db-query($ SQL);$ smarty-assign('画廊类别',$画廊类别);用的原生态代码还是比较容易理解的然后就是关键的射流研究…代码了功能更改(val){ 0复制代码代码如下:var str=val//选择的id var num//当前级数var id/分类id num=str.substr(9,10);//alert(num);var now num=Parseint(num)1;//将字符串转换为数字id=$('#' str ' ').val();var r=/^[1-9][0-9]*]* $/;//正整数if(!r.test(id)) { //清空过时的选项$("选择")。每个(函数(索引){ if(索引1 num) { $(this)).移除();} })返回false} var url='gallery.php?act=categorypid=' id$。ajax({ type: 'POST ',cache: false,url: url,datatype : 'json ',超时: 3000,成功:函数(结果){ if(结果!=0){ var html=' select name=category _ now ' num ' id=category _ now ' num ' onChange=change(' category _ now ' num ' ');html='选项请选择分类/option ';定义变量数据=eval(结果);$.每个(数据,函数(I,val){ html=' option value=' ' val。id ' ' ' val。category _ name '/option ';});html='/select ';//清空过时的选项$("选择")。每个(函数(索引){ if(索引1 num) { $(this)).移除();} }) $('#select ').追加(html);} else {//清空过时的选项$("选择")。每个(函数(索引){ if(索引1 num) { $(this)).移除();} }) },错误: false });}AJAX取数据的服务器端编程语言(专业超文本预处理器的缩写)代码复制代码代码如下' :美元sql='从yl _ gallery _类别中选择*其中pid=' .$ PID $ RES=$ db-query($ SQL);如果(空($ RES)){ $ RES=0;} echo JSON _ encode($ RES);好大功告成!

版权声明:使用js jquery实现无限极联动是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。