<!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. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  2. loj 1210 (求最少的加边数使得图变成强连通)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1210 思路:首先是缩点染色,然后重建并且统计新图中的每个点的入度和出度,于是答案就是m ...

  3. 创建对象为什么要 init?

    self 为什么要赋值为[super init]:”,当程序进入到init这个方法的时候,系统已经生成了对象并分配了存储空间,在调用[super init]是为了初始化父类对象,在父类对象初始化过程序 ...

  4. 长按事件jquery mobile

    chat_enlarge.addEventListener('touchend', function(event) { if(fingers == 1){ event.preventDefault() ...

  5. LR连接oracle时出现：SQLState=28000[Oracle][ODBC][Ora]ORA-01017:invalid username/password;logon denied

    出现的现象:

  6. python 定义类方法

    定义类方法 和属性类似,方法也分实例方法和类方法. 在class中定义的全部是实例方法,实例方法第一个参数 self 是实例本身. 要在class中定义类方法,需要这么写: class Person( ...

  7. PHP入门 - - 07-->HTML的表单

    一.<form>标签及其属性 <from></form>标签对用来创建一个表单,即定义表单的开始和结束位置,<form>标签具有下面等属性.       ...

  8. RedHat5.1下安装Seismic Unix44R1

    以前安装过好几次,在这里总结下.不足之处,欢迎批评指正. 用su44用户登录,修改环境变量(~/.bash_profile文件中添加) export CWPROOT=/home/`whoami`/cw ...

  9. D7控件\dw_cd_VirtualTreeview_v4.5.2\Demos\Advanced---TVirtualStringTree用法

    VST1: TVirtualStringTree; //按钮公用函数,根据不同 标签tag区分, Screen.Cursor := crHourGlass; //设置屏幕鼠标的形状为crhourGla ...

  10. oracle的内置函数

    1.wmsys.wm_concat   行转列函数 select wmsys.wm_concat(destnumber) from mms_send_his_record group by sendn ...