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 < ) {
return console.log('必须两个或两个以上下拉框');
} function initial() {
for (var i = ; 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 + ];
if (nextDom && nextDom.length > ) {
setDomData(nextDom, temp);
}
});
})(i);
} if (opt.data && opt.data.length > ) {
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[];
setDomData(dom, opt.data);
} function getDataByValue(idx) {
var source = opt.data;
for (var i = ; 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 === ) {
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: ,
children: [
{
text: '苗1班',
value: ,
children: [
{
text: '1组',
value: ,
children: []
}]
},
{
text: '苗2班',
value: ,
children: []
}]
},
{
text: '小班',
value: ,
children: [
{
text: '小1班',
value: ,
children: []
}]
},
{
text: '中班',
value: ,
children: [
{
text: '中1班',
value: ,
children: []
},
{
text: '中2班',
value: ,
children: []
}]
}]
})
</script>

多级联动的select框的更多相关文章

  1. JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  2. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  3. bootstrap 多级联动下拉框

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  4. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  5. vue 获取数据联动下拉框select ,并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

  6. MVC实现多级联动

    前言 多级联动(省级联动)的效果,网上现成的都有很多,各种JS实现,Jquery实现等等,今天我们要讲的是在MVC里面,如何更方便.更轻量的实现省级联动呢? 实现效果如下: 具体实现 如图所示,在HT ...

  7. 使用chosen插件实现多级联动和置位

    使用chosen插件实现多级联动和置位 首先写好第一个select,加上onchage属性之后,写onchange方法. <select data-placeholder="选择省份. ...

  8. C/C++ Qt 数据库与ComBox多级联动

    Qt中的SQL数据库组件可以与ComBox组件形成多级联动效果,在日常开发中多级联动效果应用非常广泛,例如当我们选择指定用户时,我们让其在另一个ComBox组件中列举出该用户所维护的主机列表,又或者当 ...

  9. PHP多级联动的学习(一)

    我尝试在ThinkCMF中实现多级联动,首先我开始看了dede的联动类别管理前后台的代码以及他的数据库,经过非常多次的尝试,我渐渐有了一点想法,并给予实施. 首先写出前台的界面.如图. 然后在数据库中 ...

随机推荐

  1. (转)python set 用法

    转载自:http://hi.baidu.com/����_xu/blog/item/5b9650c513bd3f049d163d8b .html python的set和其他语言类似, 是一个 基本功能 ...

  2. Java程序打包成exe可执行文件

    前言: 我们都知道Java可以将二进制程序打包成可执行jar文件,双击这个jar和双击exe效果是一样一样的,但感觉还是不同.其实将java程序打包成exe也需要这个可执行jar文件. 准备: ecl ...

  3. MongoDB之二基础入门(window/linux安装启动)

    mongodb中有三元素:数据库,集合,文档,其中“集合”就是对应关系数据库中的“表”,“文档”对应“行”. 一window安装与启动 一. 下载 上MongoDB官网 ,下载页面:https://w ...

  4. 51单片机的TXD、 RXD 既接了 232 又接了 485芯片 ,会导致通信失败!

    51单片机的TXD. RXD 既接了 232 又接了 485 ,会导致通信失败! 下面是绘制电路板用的部分电路图: 通信现象: 1.我使用了USB-232的下载模块,把它接到P4上,发现单片机只能发送 ...

  5. React 特别需要注意的地方

    如图:

  6. 基于STM32的三轴数字罗盘HMC5883L模块的测试

    最近买了个数字罗盘模块,调通后发现很不错,非常灵敏,测试的时候精度在1°以内.连续测量模式下,最快测量.输出速率可达75hz,模块每次测量完毕并将数据更新至寄存器后,其DRDY引脚便产生一个低电平脉冲 ...

  7. 关于hist

    """ Demo of the histogram (hist) function with a few features. In addition to the bas ...

  8. WPF Visibility属性用法

    WPF Visibility属性用法 Visible 元素在窗体中正常显示 Collaspsed 元素不显示,也不占用空间 Hidden 元素不显示,但是任然为它保留空间

  9. k8s 基础 问题

    vim /usr/lib/systemd/system/docker.service --insecure-registry registry.access.redhat.com \ ubelet.s ...

  10. 每天一道算法题(4)——O(1)时间内删除链表节点

    1.思路 假设链表......---A--B--C--D....,要删除B.一般的做法是遍历链表并记录前驱节点,修改指针,时间为O(n).删除节点的实质为更改后驱指针指向.这里,复制C的内容至B(此时 ...