<!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. 第三篇：用SOUI能做什么？

    SOUI-DEMO界面预览 在回答SOUI能做什么之前,先看看SVN中demo工程的界面截图: 使用SOUI实现上面的界面主要的工作全在配置几个XML文件,基本不需要写C++代码.(如何配置XML布局 ...

  2. 湖南省第十二届大学生计算机程序设计竞赛 F 地铁 多源多汇最短路

    1808: 地铁 Description Bobo 居住在大城市 ICPCCamp. ICPCCamp 有 n 个地铁站,用 1,2,…,n 编号. m 段双向的地铁线路连接 n 个地铁站,其中第 i ...

  3. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  4. VPS -Digital Ocean -初试以及VPN的搭建

    首先恭喜你找到这篇博客,它会带你走出困境. 题外话(请忽略):一直以来想搞一个VPS,终于在自己的刺激下试了一下Digital Ocean,还没有使用很长时间不做太多评论,唯一给我的感觉是各种操作还算 ...

  5. barabasilab-networkScience学习笔记4-无标度特征

    第一次接触复杂性科学是在一本叫think complexity的书上,Allen博士很好的讲述了数据结构与复杂性科学,barabasi是一个知名的复杂性网络科学家,barabasilab则是他所主导的 ...

  6. js获取今天明天

    目的:记录中展现"今天","明天",除外展现月日. 借鉴: <html> <head> <meta http-equiv=&quo ...

  7. sql 提取数字、字母、汉字

    --提取数字 IF OBJECT_ID('DBO.GET_NUMBER2') IS NOT NULL DROP FUNCTION DBO.GET_NUMBER2 GO )) ) AS BEGIN BE ...

  8. 笑谈Android图表-MPAndroidChart

    MPAndroidChart是一款基于Android的开源图表库,MPAndroidChart不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,应用起来非常灵活.MPA ...

  9. host_network_interfaces_slow_mode_thresholds

    CDH报集群异常: host_network_interfaces_slow_mode_thresholds 警告置为从不-- 主要是我没有查到发生这种情况的原因是什么--

  10. JSON 和 XML 优缺点的比较

    JSON 和 XML 优缺点的比较 1.JSON定义(JavaScript Object Notation) 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.可在不同平台之间进行数据交换 ...