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

 代码如下 复制代码
<div id="select" >
    <select name="category_1" id="category_1" onChange="change('category_1');">
        <option>请选择分类</option>
        <!-- {foreach from=$galleryCategory item=category} -->
            <option value="{$category.id}">{$category.category_name}</option>
        <!-- {/foreach} -->   
    </select>
</div>

$galleryCategory 去

数据的PHP代码为?

 代码如下 复制代码

$sql = " select * from yl_gallery_category where pid = 0";
$galleryCategory = $db->query($sql);
$smarty->assign("galleryCategory",$galleryCategory);

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

然后就是关键的 JS代码了function change(val) {

 代码如下 复制代码

var str = val; //select的id
    var num; //当前级数

    var id; // 分类id
    num = str.substr(9,10);
    //alert(num);
    var nownum = parseInt(num)+1; // 将字符串转换为数字
    id = $("#"+str+"").val();
    var r = /^[1-9]+[0-9]*]*$/;　//正整数
    if (!r.test(id)) {
        //清空过时的选项
        $("select").each(function(index){
            if(index+1 > num) {
                $(this).remove();
            }
        })
       
        return false;
    }
    var url = 'gallery.php?act=category&pid='+id;
    $.ajax({
        type: "POST",
        cache: false,
        url: url,
        datatype : 'json',
        timeout : 3000,
        success: function(result){
            if ( result != 0) {   
                var html = "<select name=category_"+nownum+"     id=category_"+nownum+"  onChange=change('category_"+nownum+"'); >";
                html += "<option>请选择分类 </option>";
                var datas = eval(result);
                $.each(datas, function(i,val){     
                    html += "<option value='"+val.id+"' >"+val.category_name+"</option>";
                });  
                html += "</select>";
               
                //清空过时的选项
                $("select").each(function(index){
                    if(index+1 > num) {
                        $(this).remove();
                    }
                })
               
                $("#select").append(html);
            } else {　　　　　　　　　　//清空过时的选项
                $("select").each(function(index){
                    if(index+1 > num) {
                        $(this).remove();
                    }
                })　　　　　　　}
               
        },
        error: false
    });
   
}

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 大功告成！

时间： 2024-12-10 14:51:26

jquery+php无限极联动菜单实例的相关文章

使用js+jquery实现无限极联动_jquery

今天工作需要写树形的联动,于是写了个可扩展的无限极联动下拉选项代码写的比较凌乱 先mark有空再整理 随便截个图!先贴数据库 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 复制代码 代码如下: <div id="select" > 

jQuery插件实现多级联动菜单效果_jquery

开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对象,需

JS无限极树形菜单,json格式、数组格式通用示例

本文为大家介绍下JS无级树形菜单的实现,修改了一下数据格式,是json和数组或者混合型的数据都通用,不用特定key等,想学习的朋友可以参考下   修改了一下数据格式,是json和数组或者混合型的数据都通用,不用特定key等 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona

关于ajax select 无限极联动修改时自动创建并选中时的问题

问题描述 页面:<tr><td>产品名称</td><thid="proContent"><selectid="proname"name="proname"onchange="showChild()"><optionvalue="">请选择..</option><tpl:foreachcollection="$

JS无限极树形菜单,json格式、数组格式通用示例_javascript技巧

修改了一下数据格式,是json和数组或者混合型的数据都通用,不用特定key等 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

ajax asp的二级联动菜单实例

category.asp文件 <% dim conn,rs dim connstr dim sqlcmd '创建数据库教程连接对象并打开 set conn=server.createobject("adodb.connection") connstr="provider=microsoft.jet.oledb.4.0;data source=" & server.mappath("data.mdb") conn.open conns

jquery+ajax+xml三级联动菜单

/*  * jQuery JavaScript Library v1.3.2  * http://jquery.com/  *  * Copyright (c) 2009 John Resig  * Dual licensed under the MIT and GPL licenses.  * http://docs.jquery.com/License  *  * Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)  * Revision:

通用无限极下拉菜单的实现代码_javascript技巧

下拉菜单在我开发中经常遇到,但是没个项目都需要从新编写,改起来虽然简单但是很麻烦,我这个人还是比较懒的,今天有时间把我以前的项目开发中的菜单整理一遍,编写一个通用版本,以后就不需要那么麻烦了. 特点 今天整理的菜单是由jquery+css开发有如下特点: 一.通用性强 以前在用的一个下拉菜单有个问题,需要对主导航和子菜单进行单独的设置,比如,二级菜单是class="first_menu",三级菜单是class="second_menu"....依次类推,这样的写法有

BootStrap无限级分类(无限极分类封装版)_jquery

HTML部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>多级联动封装</title> <link href="./css/bootstrap.css" rel="stylesheet"> <script src="./js/jque