js：jquery multiSelect 多选下拉框实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>三级联动多选下拉框</title>
<script src="<?php echo base_url() ?>js/jquery-1.7.2.min.js"></script>
<link href="<?php echo base_url(); ?>css/buildfair/jquery-ui.css" rel="stylesheet" />
<script src="<?php echo base_url() ?>js/jquery-ui.min.js"></script>
<script src="<?php echo base_url() ?>js/jquery.multiselect.min.js"></script>
<script src="<?php echo base_url() ?>js/jquery.multiselect.zh-cn.js"></script>
<link href="<?php echo base_url(); ?>css/buildfair/jquery.multiselect.css" rel="stylesheet"/> <script src="<?php echo base_url() ?>js/jquery.multiselect.filter.js"></script>
<link href="<?php echo base_url(); ?>css/buildfair/jquery.multiselect.filter.css" rel="stylesheet"/> </head>
<body>
<div>
<p>多选下拉框：</p>
<select id="first_dist" multiple="multiple" data-level="1" style="display: none;">
<?php foreach ( $firstDist as $row ): ?>
<option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option>
<?php endforeach; ?>
</select>
<select id="second_dist" multiple="multiple" data-level="2" style="display: none;">
</select>
<select id="third_dist" multiple="multiple" data-level="3" style="display: none;">
</select>
<select id="fourth_dist" multiple="multiple" data-level="4" style="display: none;">
</select>
<br/>
</div>
<div>
<p>单选下拉框：</p>
<select id="first_dist_single" style="display: none;">
<?php foreach ( $firstDist as $row ): ?>
<option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option>
<?php endforeach; ?>
</select>
</div> <div>
<p>单选下拉框（带搜索功能）：</p>
<select id="first_dist_single_filter" style="display: none;">
<?php foreach ( $firstDist as $row ): ?>
<option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option>
<?php endforeach; ?>
</select>
</div>
</body>
</html>
<script>
(function() {
// 默认只显示选择了的3个
var DEF_SHOW_SELELCTED_NUMBER = 3; $("#first_dist_single").multiselect({
multiple: false,
header: "选择一项",
selectedList: 1
}); $("#first_dist_single_filter").multiselect({
multiple: false,
noneSelectedText: "请选择",
selectedList: 1
}).multiselectfilter(); $("#first_dist").multiselect({
selectedList: DEF_SHOW_SELELCTED_NUMBER,
noneSelectedText: '请选择省市',
close: function(event, ui) {
showNextDist($(this));
}
}
);
var showNextDist = function(obj) {
var level = obj.data('level'),
nextLevel = parseInt(level) + 1,
nextDistNode = null, defaultText = '';
if (parseInt(nextLevel) === 2) {
nextDistNode = $('#second_dist');
defaultText = '请选择市县';
} else if (parseInt(nextLevel) === 3) {
nextDistNode = $('#third_dist');
defaultText = '请选择地级市';
} else if (parseInt(nextLevel) === 4) {
nextDistNode = $('#fourth_dist');
defaultText = '请选择区镇';
}
var selectedArr = obj.multiselect("getChecked").map(function() {
return this.value;
}).get();
var selectedVal = selectedArr.join(',');
if (selectedVal !== '') {
var url = '<?php echo site_url(); ?>/m/buildfair/get_district';
$.post(url, {upid: selectedVal, level: nextLevel}, function(data) {
if (data.success) {
var srcData = data.data;
if (nextDistNode !== null && srcData.length > 0) {
nextDistNode.html('');
for (index in srcData) {
var opt = srcData[index]
nextDistNode.append('<option value="' + opt.id + '">' + opt.name + '</option>');
}
nextDistNode.multiselect({
selectedList: DEF_SHOW_SELELCTED_NUMBER,
noneSelectedText: defaultText,
close: function(event, ui) {
showNextDist(nextDistNode);
}
}).multiselect('refresh');
}
}
}, 'json');
} else {
if (nextDistNode !== null) {
nextDistNode.multiselect().multiselect("destroy").hide();
var nextDistLevel = nextDistNode.data('level');
if (parseInt(nextDistLevel) === 2) {
$('#third_dist').multiselect().multiselect("destroy").hide();
$('#fourth_dist').multiselect().multiselect("destroy").hide();
} else if (parseInt(nextDistLevel) === 3) {
$('#fourth_dist').multiselect().multiselect("destroy").hide();
}
}
}
} })();
</script>
注：记得要引入相关的js和css文件。如果不知道去哪找，这里有个链接，在里面可以找到：
http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#basic
js：jquery multiSelect 多选下拉框实例的更多相关文章
- jquery.multiselect 多选下拉框实现
第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的 ...
- multiselect多选下拉框
具体实现 <input type="hidden" id="q_dueDay" name="q_dueDay" value=" ...
- jQuery自定义多选下拉框
项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如 ...
- jQuery UI 多选下拉框插件：jquery-ui-multiselect
前一个项目,由于项目需求,需要大量使用到下拉多选框,而由于本人又不会写有关 CSS 样式,所以,便上网找到了这个 jQuery 插件:jquery-ui-multiselect .该款插件提供了基本下 ...
- 【学亮IT手记】angularJS+select2多选下拉框实例
永远保持对大部分知识的好奇心,学习从不枯燥,也没有被逼学习一说,乐此不疲才是该有的心态和境界!!! 引入相关js库: html部分代码: angularJS定义数据源变量:
- js多选下拉框
1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...
- bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式 二.HTML代码 <select id="msgRoles" multiple=&q ...
- Jquery ajax 绑定multiselect多选下拉选项,同时异步执行返回值
Jquery ajax 绑定multiselect多选下拉选项,同时异步执行获取返回值 function load(mslt_employees,belongto,mark) {//传入$(#ID) ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
随机推荐
- 基于CANVAS与MD5的客户端生成验证码
好久没写东西,工作太忙了!不想服务端请求太多,搞了个这玩意儿,不过项目中并不会用上,还是使用服务端生成的机制(会安全多少呢?):我就想问个问题,除了图像识别来破解这样的简单验证码外,针对我这种例子,可 ...
- centos 给终端设快捷键
centos 终端的快捷键是默认是禁用的 设置的话 系统-> 首选项 -> 键盘快捷键 看到运行终端 随便设置想要的快捷键!!
- Hibernate 环境搭建
Hibernate 工作流程 1.创建工程并导包 2.在src根目录下创建配置文件:hibernate.cfg.xml(也可以创建在src其他文件夹下,但是在后面的配置中,需要指明路径) <?x ...
- C++工厂方法模式
class IFactoryBase { public: IFactoryBase(void); virtual ~IFactoryBase(void); public: virtual IProdu ...
- Qt中如何在QCursor移动的时候不触发moveEvent
有时候有这样的需求,比如想对全局光标进行一次setPos(),但这个时候又不想触发消息队列触发mouseMoveEvent,这个时候就可以这么做. myWidget->clearFocus(); ...
- VueJs一些资料网站链接
https://github.com/liukaijv/laravel-vue-cmshttps://github.com/allan2coder/VUE2-SPA-Tutorialhttps://g ...
- JS之路——字符串函数
JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a ...
- iOS6 自动布局 入门–Auto Layout(转)
iOS6 自动布局 入门–Auto Layout(转) 标签: 杂谈 目前为止,即使你的界面设计是在合理的复杂度内,你也必须要为之写许多代码来适应变化的布局.现在我相信你会很高兴听到这种情况将不会 ...
- 利用github for windows 工具将本地的内容同步到github上
1 利用github for windows工具来创建一个Repository,名字叫weixin,具体步骤 请参考这篇文章 根据default storage directory的设置 我知道我所创 ...
- Node.js模块 加载笔记
//核心模块就是Node.js标准API种提供的模块,如fs,http,net.vm等.官方提供,编译成二进制代码//核心模块拥有最高的加载优先级 //文件模块则是存储为单独的文件(或文件夹)的模块, ...