使用js+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" >
    <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 大功告成!

(0)

相关推荐

  • js实现无限级树形导航列表效果代码

    本文实例讲述了js实现无限级树形导航列表效果代码.分享给大家供大家参考.具体如下: 这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的JS类,有用的大家借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-tree-style-nav-list-codes/ 具体代码如下: <meta http-equiv="Content-Type" content="text/html;

  • JavaScript+CSS无限极分类效果完整实现方法

    本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法.分享给大家供大家参考,具体如下: CSS样式: a {text-decoration:none;} a,a:visited {color:#000;background:inherit;} body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;} dd

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

    修改了一下数据格式,是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

  • json+jQuery实现的无限级树形菜单效果代码

    本文实例讲述了json+jQuery实现的无限级树形菜单效果代码.分享给大家供大家参考.具体如下: 这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里 扩展无限级 看结构就明白. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • asp实现无限级分类的方法js版

    MenuArr=new Array()MenuLenArr=new Array()SubMenuArr=new Array()MenuIdArr=new Array()MenuArr[1]="<%call top11%>" //洲名|||...MenuArr[2]="<%call top1%>" //洲名###国名|||...MenuIdArr[1]="zhou"MenuIdArr[2]="author"

  • 基于jquery的无限级联下拉框js插件

    灵活性方面考虑了比较多的方面,提供了几个重要的配置方便在各类环境下使用,欢迎各位童鞋使用,源码完全开放.开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷(之所以这么多代码是因为该级联下拉框有时只出现2个或3个),想到这类的需求其实经常都能遇到,jquery里没有这样比较好的插件,索性自己开发个.源代码并不复杂,稍微复杂的地方在第二个插件使用了缓存,造成理解起来十分困难,后面会做些解释. 插件一:适合在不与服务器进行AJAX交互情况使用,需预先将所有下拉

  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码.分享给大家供大家参考.具体如下: 这是一款超不错的网页折叠菜单,采用JavaScript实现.折叠菜单是大家比较常见到的一种菜单形式,可广泛应用于管理系统.后台左侧.产品列表中,本折叠菜单有点树形菜单的味道,相信"无限级"会满足你的要求. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/ 具体代

  • javascript实现无限级select联动菜单

    代码很简单,这里主要是给大家推荐一下本代码的实现思路,别具一格. 奉上代码: 复制代码 代码如下: <!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

  • 使用js+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 无限极下拉菜单的简单实例(精简浓缩版) <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>我们 www.jb51.net</title> <script type=&quo

  • 通用无限极下拉菜单的实现代码

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

  • jQuery插件cxSelect多级联动下拉菜单实例解析

    随着电商的火爆,这多级联动下拉菜单体现的更加充分,最明显的就是地址的多级联动下拉选择,所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点需要学

  • 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html> <html> <head> <meta charset=&q

  • 基于jquery实现省市区三级联动效果

    本文实现更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们. JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 说明:数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"&g

  • jquery怎样实现ajax联动框(二)

    另一种形式的联动框,右边的联动框用jquery生成  这是仿照上篇的js方法修改的 先看下页面代码: 复制代码 代码如下: <tr id="sfqySelect"> <td width="100" class="t_r prten field_c">事发区域:</td> <td width="131"> <select class="building"&

  • jquery实现无限分级横向导航菜单的方法

    本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: 复制代码 代码如下: (function($){     $.fn.extend({         droplinemenu: function(configs) {             var configs = $.extend({                                over: 200,                 o

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

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

随机推荐