多级联动的select框
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框的更多相关文章
- JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...
- ajax 多级联动 下拉框 Demo
写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...
- bootstrap 多级联动下拉框
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- vue 获取数据联动下拉框select ,并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误
公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...
- MVC实现多级联动
前言 多级联动(省级联动)的效果,网上现成的都有很多,各种JS实现,Jquery实现等等,今天我们要讲的是在MVC里面,如何更方便.更轻量的实现省级联动呢? 实现效果如下: 具体实现 如图所示,在HT ...
- 使用chosen插件实现多级联动和置位
使用chosen插件实现多级联动和置位 首先写好第一个select,加上onchage属性之后,写onchange方法. <select data-placeholder="选择省份. ...
- C/C++ Qt 数据库与ComBox多级联动
Qt中的SQL数据库组件可以与ComBox组件形成多级联动效果,在日常开发中多级联动效果应用非常广泛,例如当我们选择指定用户时,我们让其在另一个ComBox组件中列举出该用户所维护的主机列表,又或者当 ...
- PHP多级联动的学习(一)
我尝试在ThinkCMF中实现多级联动,首先我开始看了dede的联动类别管理前后台的代码以及他的数据库,经过非常多次的尝试,我渐渐有了一点想法,并给予实施. 首先写出前台的界面.如图. 然后在数据库中 ...
随机推荐
- (转)python set 用法
转载自:http://hi.baidu.com/����_xu/blog/item/5b9650c513bd3f049d163d8b .html python的set和其他语言类似, 是一个 基本功能 ...
- Java程序打包成exe可执行文件
前言: 我们都知道Java可以将二进制程序打包成可执行jar文件,双击这个jar和双击exe效果是一样一样的,但感觉还是不同.其实将java程序打包成exe也需要这个可执行jar文件. 准备: ecl ...
- MongoDB之二基础入门(window/linux安装启动)
mongodb中有三元素:数据库,集合,文档,其中“集合”就是对应关系数据库中的“表”,“文档”对应“行”. 一window安装与启动 一. 下载 上MongoDB官网 ,下载页面:https://w ...
- 51单片机的TXD、 RXD 既接了 232 又接了 485芯片 ,会导致通信失败!
51单片机的TXD. RXD 既接了 232 又接了 485 ,会导致通信失败! 下面是绘制电路板用的部分电路图: 通信现象: 1.我使用了USB-232的下载模块,把它接到P4上,发现单片机只能发送 ...
- React 特别需要注意的地方
如图:
- 基于STM32的三轴数字罗盘HMC5883L模块的测试
最近买了个数字罗盘模块,调通后发现很不错,非常灵敏,测试的时候精度在1°以内.连续测量模式下,最快测量.输出速率可达75hz,模块每次测量完毕并将数据更新至寄存器后,其DRDY引脚便产生一个低电平脉冲 ...
- 关于hist
""" Demo of the histogram (hist) function with a few features. In addition to the bas ...
- WPF Visibility属性用法
WPF Visibility属性用法 Visible 元素在窗体中正常显示 Collaspsed 元素不显示,也不占用空间 Hidden 元素不显示,但是任然为它保留空间
- k8s 基础 问题
vim /usr/lib/systemd/system/docker.service --insecure-registry registry.access.redhat.com \ ubelet.s ...
- 每天一道算法题(4)——O(1)时间内删除链表节点
1.思路 假设链表......---A--B--C--D....,要删除B.一般的做法是遍历链表并记录前驱节点,修改指针,时间为O(n).删除节点的实质为更改后驱指针指向.这里,复制C的内容至B(此时 ...