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插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
随机推荐
- C# Wpf双向绑定实例
Wpf中双向绑定处理需要两处 实例1: 1.前台Xaml中属性Binding 时Model指定 TwoWay <Grid> <Ellipse x:Name="ellipse ...
- 关于Core Data的一些整理（一）
关于Core Data的一些整理(一) 在Xcode7.2中只有Mast-Debug和Single View中可以勾选Use Core Data 如果勾选了Use Core Data,Xcode会自动 ...
- 无法升级数据库....因为此版本的 SQL Server 不支持该数据库的非发布版本(539) 解决方案
使用SQL2012附加一个数据库时报出了以下错误:“无法升级数据库....因为此版本的 SQL Server 不支持该数据库的非发布版本(539).不能打开与此版本的 sqlserver.exe 不兼 ...
- [转]Delphi导出Excel的设置操作
procedure CreatRepSheet(SheetName:String;PageSize,PageLay:Integer); {新建Excel工作簿.进行页面设置} begin {新建Exc ...
- java_reflect_01
最近学习java开始接触到了框架,突然觉得java反射很重要,因此在这里做了一些总结(参考园中大苞米大神的文章) 首先我们要认识一下Class: 一.Class类有什么用? class类的实例表示ja ...
- Qt Painter放大时，event处理应该注意的要点
比如当你Qt中用QPainter进行window和viewport,逻辑和物理坐标分离的形式进行绘图放大的时候,你会发现鼠标的移动和放大之后的图像有点不跟手,比如你是用QTransform进行放大变换 ...
- 如何写angularJS模块
angularJS中提供模块的概念,供我们把代码封装在模块单元中,使用模块能给我们带来的好处 保持全局命名空间的清洁 易于在不同应用间复用代码 demo.html <!doctype html& ...
- html中插入flash代码详解（转载）
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://down ...
- jQuery简单导航示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在win8.1 64位环境下有关Oracle的安装和卸载
1,Oracle安装 3 注意:在win8.1环境下安装64位的oracle客户端,注意配置是1g的 2.Oracle的卸载:http://jingyan.baidu.com/article/f7ff ...