Rumah > pembangunan bahagian belakang > tutorial php > js+jquery 无限极联动_PHP教程

js+jquery 无限极联动_PHP教程

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-07-20 11:13:41
asal
1242 orang telah melayarinya

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

代码写的比较凌乱 先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>
Salin selepas log masuk
<span>$galleryCategory 去数据的PHP代码为<br /><br /></span>
Salin selepas log masuk
$sql = " select * from yl_gallery_category where pid = 0";
$galleryCategory = $db->query($sql);
$smarty->assign("galleryCategory",$galleryCategory);
Salin selepas log masuk

  给辞职的同事的项目擦屁股 用的原生态代码 还是比较容易理解的

然后就是关键的 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>
Salin selepas log masuk
<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>
Salin selepas log masuk
<span        }
                
        },
        error: </span><span false</span><span 
    });
    
}</span>
Salin selepas log masuk

AJAX 取数据的PHP代码

$sql = " select * from yl_gallery_category where pid = " .$pid;
	$res = $db->query($sql);
	if (empty($res)) {
		$res = 0;
	}
	echo json_encode($res);
Salin selepas log masuk

 OK 大功告成!

<span><br /><br /></span>
Salin selepas log masuk

 

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/440345.htmlTechArticle今天工作需要 要写树形的联动,于是写了个可扩展的无限极联动下拉选项 代码写的比较凌乱 先mark 有空再整理 操蛋! 公司连QQ都不能上...
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan