Heim >Backend-Entwicklung >PHP-Tutorial >js+jquery 无限极联动_PHP教程
今天工作需要 要写树形的联动,于是写了个可扩展的无限极联动下拉选项
代码写的比较凌乱 先mark 有空再整理
操蛋!
公司连QQ都不能上 随便截个图!
先贴数据库
id | category_name 分类名 | pid 父分类id | orders 排序 |
---|---|---|---|
1 | 22223331 | 0 | 1 |
2 | 2222111 | 1 | 1 |
12 | 44444 | 11 | 0 |
5 | 2222 | 1 | 1 |
6 | 2222 | 1 | 1 |
11 | 333 | 2 | 0 |
13 | 555555 | 12 | 0 |
页面代码 用的SMARTY
<span <</span><span div </span><span id</span><span ="select"</span> <span ></span> <span <</span><span select </span><span name</span><span ="category_1"</span><span id</span><span ="category_1"</span><span onChange</span><span ="change('category_1');"</span><span ></span> <span <</span><span option</span><span ></span>请选择分类<span </</span><span option</span><span ></span> <span <!--</span><span {foreach from=$galleryCategory item=category} </span><span --></span> <span <</span><span option </span><span value</span><span ="{$category.id}"</span><span ></span>{$category.category_name}<span </</span><span option</span><span ></span> <span <!--</span><span {/foreach} </span><span --></span> <span </</span><span select</span><span ></span> <span </</span><span div</span><span ></span>
<span>$galleryCategory 去数据的PHP代码为<br /><br /></span>
$sql = " select * from yl_gallery_category where pid = 0"; $galleryCategory = $db->query($sql); $smarty->assign("galleryCategory",$galleryCategory);
给辞职的同事的项目擦屁股 用的原生态代码 还是比较容易理解的
然后就是关键的 JS代码了 change(val) {
<em id="__mceDel"><span var</span> str = val; <span //</span><span select的id</span> <span var</span> num; <span //</span><span 当前级数</span> <span var</span> id; <span //</span><span 分类id</span> num = str.substr(9,10<span ); </span><span //</span><span alert(num);</span> <span var</span> nownum = parseInt(num)+1; <span //</span><span 将字符串转换为数字</span> id = $("#"+str+""<span ).val(); </span><span var</span> r = /^[1-9]+[0-9]*]*$/; <span //</span><span 正整数</span> <span if</span> (!<span r.test(id)) { </span><span //</span><span 清空过时的选项</span> $("select").each(<span function</span><span (index){ </span><span if</span>(index+1 ><span num) { $(</span><span this</span><span ).remove(); } }) </span><span return</span> <span false</span><span ; } </span><span var</span> url = 'gallery.php?act=category&pid='+<span id; $.ajax({ type: </span>"POST"<span , cache: </span><span false</span><span , url: url, datatype : </span>'json'<span , timeout : </span>3000<span , success: </span><span function</span><span (result){ </span><span if</span> ( result != 0<span ) { </span><span var</span> html = "<select name=category_"+nownum+" id=category_"+nownum+" onChange=change('category_"+nownum+"'); >"<span ; html </span>+= "<option>请选择分类 </option>"<span ; </span><span var</span> datas =<span eval(result); $.each(datas, </span><span function</span><span (i,val){ html </span>+= "<option value='"+val.id+"' >"+val.category_name+"</option>"<span ; }); html </span>+= "</select>"<span ; </span><span //</span><span 清空过时的选项</span> $("select").each(<span function</span><span (index){ </span><span if</span>(index+1 ><span num) { $(</span><span this</span><span ).remove(); } }) $(</span>"#select"<span ).append(html); } else {<br /></span></em>
<span> //</span><span>清空过时的选项</span> $("select").each(<span>function</span><span>(index){ </span><span>if</span>(index+1 ><span> num) { $(</span><span>this</span><span>).remove(); } })</span>
<span } }, error: </span><span false</span><span }); }</span>
AJAX 取数据的PHP代码
$sql = " select * from yl_gallery_category where pid = " .$pid; $res = $db->query($sql); if (empty($res)) { $res = 0; } echo json_encode($res);
OK 大功告成!
<span><br /><br /></span>