<!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. android 入门-git之上传本地代码到github

    github部分: 1.首先去github网站 上注册一个用户 2.说明 https://guides.github.com/activities/hello-world/ 2.点击 New repo ...

  2. 直传文件到Azure Storage的Blob服务中

    (此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注.) 题记:为了庆祝获得微信公众号赞赏功能,忙里抽闲分享一下最近工作的一点心得:如何直接从浏览器中上传文件到Azure ...

  3. 计算G711语音的打包长度和RTP里timestamp（时间戳）的增长量

    转自:http://blog.csdn.net/xujianglun/article/details/48342367 如何计算G711语音等的打包长度和RTP里timestamp的增长量 一般对于不 ...

  4. OpenMesh 删除网格顶点

    OpenMesh 提供了 delete_vertex() 函数来实现从网格中删除顶点,在删除掉顶点的同时,所有与该顶点相连的边也同时被删除. OpenMesh 官方文档 中给的顶点删除函数声明如下: ...

  5. ubuntu中禁用华硕S550C触摸屏的方法

    华硕S550C的触摸屏被我一不小心弄了一条裂缝,导致屏幕一直会莫名其妙自动进行点击,严重影响了使用.在windows 系统下通过FN+F7的快捷键可以直接禁用触摸屏,但是换成ubuntu 系统之后,快 ...

  6. BZOJ 1503: [NOI2004]郁闷的出纳员 splay

    1503: [NOI2004]郁闷的出纳员 Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作 ...

  7. iOS中图片动画的三种模式及基本的代码实现

    -(void)play { //第一种图片动画模式 头尾方式 //头尾方式 [UIView beginAnimations:nil context:nil];//动画开始 [UIView setAni ...

  8. MyBatis入门案例 增删改查

    一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...

  9. 使用 json_in_java

    // */ // ]]> java_in_json Table of Contents 1. Java 使用 Json 1.1. 下载地址: 1.2. 构造 json 字符串 1.3. 解析 j ...

  10. CSS3设置多张背景图片

    background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");background-rep ...