标签: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>
标签:res class success query style div win contain col
原文地址:https://www.cnblogs.com/diwu0510/p/10850715.html