<!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. PMP 第五章 项目范围管理

    1.范围管理主要是干什么?什么是产品范围?什么是项目范围?    项目范围管理包括确保项目做而且只做成功完成项目所需的全部工作的各过程.管理项目范围主要是在定义和控制哪些工作应该包括在项目内,哪些不应 ...

  2. PDF解析记录——Pdfbox

    此文仅作记录[嫌放电脑里碍事-_-],内容为以前收集的一小段代码.   下面为pdf获取文本的简要代码片段: private string GetPDFText(string filename) { ...

  3. Java Web 项目获取运行时路径 classpath

    假设资源文件放在maven工程的 src/main/resources 资源文件夹下,源码文件放在 src/main/java/下, 那么java文件夹和resources文件夹在运行时就是class ...

  4. Android ImageCache图片缓存，使用简单，支持预取，支持多种缓存算法，支持不同网络类型，扩展性强

    本文主要介绍一个支持图片自动预取.支持多种缓存算法的图片缓存的使用及功能.图片较大需要SD卡保存情况推荐使用ImageSDCardCache. 与Android LruCache相比主要特性:(1). ...

  5. loj 1257 （求树上每一个点到树上另一个点的最长距离）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1257 思路:首先需要用到一个知识点就是树上任一点到树上最长直径的某一个端点的距离最远, ...

  6. cocos2dx游戏开发——别踩白块学习笔记（二）——经典模式的实现

    一.创建GameScene以及GameLayer 就是简单创建一个Scene而已,在此就不多说啦~,可以参照我的打飞机的学习笔记(2). 二.添加一个开始栏 很简单,就是调用Block中的create ...

  7. sql篇 select from where group by having order by

    以前,自己总是记不住如何用group by,如何用order by,什么时候用group by,什么时候用order by,什么时候两者一起用,怎么用,谁先谁后,现在,我们就一起来说一下Select ...

  8. 【Android开发日记】Popupwindow 完美demo

    Popupwindow 完美demo实现 图示: 关键代码说明: 1.弹出popupwindow,背景变暗 ColorDrawable cd = new ColorDrawable(0x000000) ...

  9. C#根据html生成PDF

    使用iTextSharp 控件 iTextSharp包括几个dll. 主要iTextSharp版本包含:——itextsharp.dll:核心库——itextsharp.xtra.dll:额外的功能( ...

  10. hdu3033 背包变形

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3033 大意:每类物品中至少买一件,比较简单 AC代码: #include<iostr ...