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插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
随机推荐
- vedeo与audio标签的使用
浏览器原生支持音视频无疑是一件大事——尤其对移动设备而言.不依赖Flash,意味着更加省电.安全和快速的播放体验,而且只需要引入一个标签,就能播放自如. <video src="dao ...
- java 项目request.getParameter("")接收不到值
如果发现这个方法 以前能接收到参数,现在不能接收到参数的情况下 很有问题出来tocat 或许jak 的问题上, 换个低版本可能就好了
- Sql Server使用技巧
1.修改表的字段时,提示不能更改: 工具>选项>设计器>取消 阻止保存要求重新创建表的更改 2.更改选择多少行,编辑多少行: 工具>选项>Sql Server对象资源管理 ...
- idea maven web工程明明添加了maven lib的依赖，但启动web容器时始终报No Class Found?
idea maven web工程明明添加了maven lib的依赖,但启动web容器时始终报No Class Found? 很久没用idea搭新工程,最近自己想做个东西,冲心搭个web工程,jar包都 ...
- js 日期修改
很早之前在CSDN上发的博客,现在CSDN上得少了,就把这个转到园子里来 //重写toString方法,将时间转换为Y-m-d H:i:s格式 Date.prototype.toString = fu ...
- 理解线程的挂起，sleep还有阻塞
线程是靠cpu来运行的,cpu要运行一个线程(不说别的)最起码就是要占用cpu时间,象Windows这样的多任务操作系统,可以允许多个线程同时运行,所谓的同时运行并不是真正的同时运行,而是轮流运行不同 ...
- 测试最新的log4cplus1.1.2版
#include "stdafx.h" #include <sstream> class AB{ public: void do_test() { ...
- Cloudera Manager(CentOS)安装介绍
相信通过这篇文章大家都对Cloudera Manager及CDH安装有一个整体的认识 目 录 1 准备工 作.................................... ...
- python之路基础篇
基础篇 1.Python基础之初识python 2.Python数据类型之字符串 3.Python数据类型之列表 4.Python数据类型之元祖 5.Python数据类型之字典 6.Python Se ...
- [转] .NET 3.5中MSChart组件的ImageLocation属性含义
在.NET程序/网站中如果要生成统计图表/图形,以前可以采用OWC(Office Web Components),如OfficeXP组件OWC10.Office2003组件OWC11.OWC采用COM ...