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插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
随机推荐
- WMI概述
关于wmi的定义可以在网上和msdn中查询,我在这里想说说自己对wmi的理解.Wmi是Windows Management Instrumentation(windows管理方法)的缩写.在wmi中微 ...
- Android Marquee
android:singleLine="true" android:marqueeRepeatLimit="marquee_forever" android:e ...
- Oracle_Flashback_技术_总结
Oracle Flashback 技术 总结 Flashback 技术是以Undo segment中的内容为基础的, 因此受限于UNDO_RETENTON参数.要使用flashback 的特性,必须启 ...
- 【USACO 1.2.1】挤牛奶
[问题描述] 三个农民每天清晨5点起床,然后去牛棚给3头牛挤奶.第一个农民在300时刻(从5点开始计时,秒为单位)给他的牛挤奶,一直到1000时刻.第二个农民在700时刻开始,在 1200时刻结束.第 ...
- C++ Primer 5th 第13章 拷贝控制
当一个对象的引用或者指针离开作用域时,析构函数不会执行. 构造函数有初始化部分(初始化列表)和函数体. 析构函数有析构部分和函数,但析构函数的析构部分是隐式的.
- underscorejs-max学习
2.15 max 2.15.1 语法: _.max(list, [iteratee], [context]) 2.15.2 说明: 返回list中的最小值. list为集合,数组.对象.字符串或arg ...
- git log友好显示
查看commit 提交日志 $ git log $git log --pretty=oneline $git reflog 显示所有提交记录,包括已经回退的提交,如图:提交了abc 和 bb 然后回退 ...
- lua学习-1
最近打算学习quick cocos2dx,所以首先打算学习一下lua这门语言,Lua 是一个小巧的脚本语言,轻量级,便于扩展. Lua脚本基本的数据类型:nil.boolean.number.stri ...
- 栈的链式存储方法的C语言实现
/* 编译器:Dev-c++ 5.4.0 文件名:linkStack.cpp 代码版本号:1.0 时间:2015年10月15日18:56:06 */ #include <stdio.h> ...
- Remember the Word
uvalive3942:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&pag ...