js+jquery Infinitus linkage_PHP tutorial

Today’s work required me to write a tree-shaped linkage, so I wrote an expandable Infinitus linkage drop-down option

The code is quite messy, mark it first and then sort it out when you have time

Fuck it!

The company can’t even access QQ, so just take a screenshot!

Post the database first

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

Page code uses 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);

The original code used to wipe the project of the resigned colleague is relatively easy to understand

Then comes the key JS code 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>

PHP code for AJAX data retrieval

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

OK Done!

<span><br /><br /></span>

http://www.bkjia.com/PHPjc/440345.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/440345.htmlTechArticleToday’s work requires writing tree-shaped linkage, so I wrote an expandable infinite linkage drop-down option code It's quite messy. Mark it when you have time and then tidy it up! The company cannot even access QQ...