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插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
随机推荐
- java编程思想-枚举类型思维导图
- 用XMPP实现完整Android聊天项目
简介 这是一个完整的xmpp的Android的项目服务端使用openfire3.9.3客户端使用Android4.2.2 集成第三方:百度地图sdkasmack.jaruniversal-image- ...
- UICollectionView出现the behavior of the UICollectionViewFlowLayout is not defined because:
2015-01-28 21:55:17.790 Demo[636:9351] the behavior of the UICollectionViewFlowLayout is notdefined ...
- Sql Xtype
SQL Server xtype的介绍 在数据库内创建的每个对象(约束.默认值.日志.规则.存储过程等)在表中占一行.只有在 tempdb 内,每个临时对象才在该表中占一行. 列名 数据类型 描 ...
- jsp <%! %> 与 <% %> 区别
转自huangqiqing123.iteye.com/blog/1922014 <body> <%! //1.可定义方法 public String outMethod(){ ret ...
- Qt中QWidget加入到父类QWidget不能显示的问题
最近忙活了半天发现了一个不容易发现的问题,比如我有一个父类的自定义Widget,并且自己设置了Pattle,但这个时候我如果再在当前Widget内部加入自己的widget就不能正常显示,但是加QPus ...
- 终于通过了PMP考试，然这只是一个开始。。。
三个月的辛苦付出,从2015/06/18(本人的生日)开始接受培训,2015/10/6终于收到了PMI发过来的祝贺的邮箱,但是成绩不是很理想.只得了两个B,三个M.但是目标已实现,心情回落. 在这三个 ...
- CSS样式margin:0 auto不居中
<style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...
- Java多线程中易混淆的概念
概述 最近在看<ThinKing In Java>,看到多线程章节时觉得有一些概念比较容易混淆有必要总结一下,虽然都不是新的东西,不过还是蛮重要,很基本的,在开发或阅读源码中经常会遇到,在 ...
- lua curl动态链接库编译安装(二)
下面再介绍一下lua-curl中的lua-curl-0.2.tar.gz版本的安装方法,可能对于一般的人来说这个很简单,但是对于我们这些菜鸟来说就不一样了: # wget http://files.l ...