多级联动的select框

Posted 2021-11-29 diwu0510

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>