码迷,mamicode.com
首页 > 其他好文 > 详细

多级联动的select框

时间:2019-05-12 01:13:57      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:res   class   success   query   style   div   win   contain   col   

JS文件:

; (function($, w) {
    var LinkSelect = function(config) {
        var opt = {
            doms: config.doms || [],
            url: config.url || ‘‘,
            type: config.type || get,
            data: config.data || []
        };

        if (opt.doms.length < 2) {
            return console.log(必须两个或两个以上下拉框);
        }

        function initial() {
            for (var i = 0; i < opt.doms.length; i++) {
                (function(idx) {
                    opt.doms[idx].on(change,
                        function () {
                            var val = $(this).val();
                            var temp = getDataByValue(idx);
                            var nextDom = opt.doms[idx + 1];
                            if (nextDom && nextDom.length > 0) {
                                setDomData(nextDom, temp);
                            }
                        });
                })(i);
            }


            if (opt.data && opt.data.length > 0) {
                initialUi();
            } else {
                if (!opt.url || opt.url === ‘‘) {
                    return console.log(配置无效,必须指定url或data);
                } else {
                    $.ajax({
                        url: opt.url,
                        type: opt.type,
                        success: function(response) {
                            opt.data = response;
                            initialUi();
                        }
                    });
                }
            }
        }

        function initialUi() {
            var dom = opt.doms[0];
            setDomData(dom, opt.data);
        }

        function getDataByValue(idx) {
            var source = opt.data;
            for (var i = 0; i <= idx; i++) {
                (function(idx) {
                    var temp = source.find(function(item) {
                        return item.value.toString() === opt.doms[idx].val();
                    });
                    if (temp && temp.children) {
                        source = temp.children;
                    } else {
                        source = [];
                    }
                })(i);
            }
            return source;
        }

        function resetDom(dom) {
            dom.html(<option value="">请选择</option>);
        }

        function setDomData(dom, data) {
            if (!data || data.length === 0) {
                resetDom(dom);
            } else {
                var html = <option value="">请选择</option>;
                $.each(data,
                    function(idx, item) {
                        html += <option value=" + item.value + "> + item.text + </option>;
                    });
                dom.html(html);
            }
            dom.trigger(change);
        }

        initial();
    };
    w.LinkSelect = LinkSelect;
})(jQuery, window);

页面结构

<div class="container">
    <h2>Index</h2>
    <hr />
    <div class="form-box">
        <div class="row">
            <div class="label">年级</div>
            <div class="control">
                <select id="grade"></select>
            </div>
        </div>
        <div class="row">
            <div class="label">班级</div>
            <div class="control">
                <select id="clazz"></select>
            </div>
        </div>
        <div class="row">
            <div class="label">组</div>
            <div class="control">
                <select id="group"></select>
            </div>
        </div>
    </div>
</div>

使用方法:

<script src="lib/myui/LinkSelect.js"></script>
    <script>
        var ls = new LinkSelect({
            doms: [$(#grade), $(#clazz), $(#group)],
            data: [
                {
                    text: 苗班,
                    value: 1,
                    children: [
                        {
                            text: 苗1班,
                            value: 1,
                            children: [
                                {
                                    text: 1组,
                                    value: 1,
                                    children: []
                                }]
                        },
                        {
                            text: 苗2班,
                            value: 2,
                            children: []
                        }]
                },
                {
                    text: 小班,
                    value: 2,
                    children: [
                        {
                            text: 小1班,
                            value: 3,
                            children: []
                        }]
                },
                {
                    text: 中班,
                    value: 3,
                    children: [
                        {
                            text: 中1班,
                            value: 4,
                            children: []
                        },
                        {
                            text: 中2班,
                            value: 5,
                            children: []
                        }]
                }]
        })
    </script>

 

多级联动的select框

标签:res   class   success   query   style   div   win   contain   col   

原文地址:https://www.cnblogs.com/diwu0510/p/10850715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!