首页 > 代码库 > jquery js javascript select 无限级 插件 优化foxidea版

jquery js javascript select 无限级 插件 优化foxidea版

2024-07-06 01:07:07   221人阅读

<!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="http://www.mamicode.com/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 =http://www.mamicode.com/= sid) {"前端开发", 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>

 


联系
我们