js+jquery 无限极联动_PHP教程-php教程-PHP中文網

js+jquery 无限极联动_PHP教程

WBOY

發布： 2016-07-20 11:13:41

原創

1188 人瀏覽過

今天工作需要要写树形的联动，于是写了个可扩展的无限极联动下拉选项

代码写的比较凌乱先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>

登入後複製