<!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">

<head>

    <title></title>

    <script src="jquery.js" type="text/javascript"></script>

</head>

<body>

    <h2>无限级 select demo2</h2>

	<div id="demo2" style="width:360px; padding:5px; border:3px solid #000; float:left">

	</div>

    <input type="text" id="txt_value" />

    <input type="text" id="txt_text" />

</body>

</html>

<script type="text/javascript">

    _doc = document;

    var Doc = {};

    Doc.Create = function (tagName) {

        return _doc.createElement(tagName);

    }

    Doc.Append = function (dom) {

        _doc.body.appendChild(dom);

    }

    Doc.Get = function (_id) {

        return _doc.getElementById(_id);

    }

    //无限级 select 分类

    function Select(arr, chg,callback) {

        //获得子类 集合（select）

        var getSel = function (pid) {

            var _select = Doc.Create("select");

            _select.options.add(new Option('选择分类', ""));

            for (var i = 0; i < arr.length; i++) {

                if (arr[i].pid == pid) {

                    _select.options.add(new Option(arr[i].name, arr[i].id));

                }

            }

            var delChildfun = function (obj) {

                if (obj.child) {

                    var _child = obj.child;

                    if (_child.parentNode) {

                        _child.parentNode.removeChild(_child);

                    }

                    delChildfun(_child);

                }

            }

            _select.onchange = function () {

                delChildfun(this);

                this.child = getSel(this.options[this.selectedIndex].value);

                chg(this.child);

                callback(this.options[this.selectedIndex]);

            }

            return _select;

        }

        //===================获得节点

        var r_arr = [];

        var getPidById = function (id) {

            for (var i = 0; i < arr.length; i++)

                if (arr[i].id == id) return arr[i].pid;

            return -1;

        }

        var getSelBySid = function (sid) {

            var pid = getPidById(sid);

            var sel = getSel(pid);

            for (var i = 0; i < sel.options.length; i++) {

                if (sel.options[i].value == sid) {

                    sel.selectedIndex = i; break;

                }

            }

            if (pid > 0) getSelBySid(pid);

            r_arr.push(sel);

        }

        this.getDom = function (selectid) {

            getSelBySid(selectid || arr[0].id);

            for (var i = 0; i < r_arr.length; i++)

                if (i + 1 < r_arr.length)

                    r_arr[i].child = r_arr[i + 1];

            return r_arr;

        }

    }

    /**==============demo==============**/

    var data = [

    { id: 1, name: "前端开发", pid: 0 },

    { id: 2, name: "CSS", pid: 1 },

    { id: 3, name: "JS", pid: 1 },

    { id: 4, name: "HTML", pid: 1 },

    { id: 5, name: "数据库", pid: 0 },

    { id: 6, name: "SQLServer", pid: 5 },

    { id: 7, name: "MYSql", pid: 5 },

    { id: 8, name: "Oracle", pid: 5 },

    { id: 9, name: "PLSQL", pid: 8 }

];

    var demo2 = Doc.Get("demo2");

    var chg = function (obj) {

        if (obj.options.length > 1) {

            obj.selectedIndex = 0;

            demo2.appendChild(obj);

        }

    }

    var sel2 = new Select(data, chg, function (obj) {

        $("#txt_value").val(obj.value);

        $("#txt_text").val(obj.text);

    });

    var _arr = sel2.getDom(9);

    for (var i = 0; i < _arr.length; i++) {

        demo2.appendChild(_arr[i]);

    }

    /**==============demo==============**/

</script>

jquery js javascript select 无限级 插件 优化foxidea版的更多相关文章

  1. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  2. JQuery/JS插件 jsTree加载树，预先加载，初始化时加载前三级节点，当展开第三级节点时 就加载该节点下的所有子节点

    jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...

  3. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  4. jQuery对标签select优化：实现模糊搜索查询功能

    由于select标签中的option条数较多,翻页查询比较麻烦,需要对select标签进行优化,解决方法是通过增加模糊查询功能来提高用户体验感. 优化后的界面如下: 在实现这个优化的过程中,参考了两个 ...

  5. jQuery 是javascript的一个库（常用插件、处理器）

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery就是javascript的一个库,把我 ...

  6. JQuery/JS插件 jsTree加载树，普通加载，点一级加载一级

    前端: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  7. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  8. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  9. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

随机推荐

  1. thinkphp自动验证中的静态验证和动态验证和批量验证

    1.静态定义 在模型类里面预先定义好该模型的自动验证规则,我们称为静态定义. 举例说明,我们在模型类里面定义了$_validate属性如下: class UserModel extends Model ...

  2. WPF 多语言实现

    很多国际化的程序都提供了多语言的选项,这样方便不同国家的使用者更方便的使用软件.这篇博客中将介绍在WPF中实现多语言的方式. 方式一,使用WPF动态资源的方式实现.先简单介绍下StaticResour ...

  3. [Outlook]设置邮件自动接收时间

    [Outlook]设置邮件自动接收时间   找了好久,一直都没设置正常,导致老是收到邮件有延迟,今天头脑清晰,搜了一下,然后自己竟然给找到了,记下来当笔记,好记性不如烂笔头,呵呵   搜索百度&quo ...

  4. 深入分析JavaWeb 技术内幕

    1,通过浏览器请求一个资源,会发生以下几种过程 1) http的解析过程,包括对于http请求头和响应头中指令(控制用户浏览器的渲染行为和 服务器的执行逻辑)的解析 2)DNS的解析过程(根据域名获取 ...

  5. 时间编程,王明学learn

    时间编程 一.时间类型 Coordinated Universal Time(UTC):世界标准时间,也就是大家所熟知的格林威治标准时间(Greenwich Mean Time,GMT) Calend ...

  6. android AsyncTask介绍（转）

    android AsyncTask介绍 AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接 ...

  7. objective-c常用方法列表(总结)

    第1章 Objective-C学习环境准备 1.1 Objective-C基础 1.1.1 Objective-C的发展历程 1.1.2 Objective-C语言的特点 1.1.3 技术架构 1.2 ...

  8. 数据分析(4):Scipy

    科学计算 最小二乘leastsq # -*- coding: utf-8 -*- def func(x,p): # p 参数列表 A,k,theta = p; # 可以一一对应赋值 return A* ...

  9. Java学习随笔2：Java复合赋值表达式的小问题

    问题:i += j只是i = i + j的简写么? 答案:非也!看下面的程序: int i = 5; long j = 8; i += j; // 可以通过编译且结果正确 i = i + j; // ...

  10. 【T_SQL】 基础 续+++

    十五.T-SQL 编程 1.变量 (1)局部变量                    A.局部变量必须以标记@作为前缀 ,如@age.                    B.局部变量的使用也是先 ...