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插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
随机推荐
- LINUX 内核代码 errno 错误代码提示 /include/asm/errno.h
首先在自己的程序中#include<errno.h> 添加打印errno的语句 printf("errno is: %d\n",errno); 根据errno的值查错. ...
- big_table练习数据表
big_table练习数据表 create table big_table as select rownum id, a.* from all_objects a / alter table big_ ...
- TCP/IP-IP
A contented mind is a perpetual feast. "知足长乐" 参考资料:TCP/IP入门经典 (第五版) TCP/IP详解 卷一:协议 一.简介 IP ...
- Extjs中numberfield小数位数设置
在默认的情况下,使用numberfield控件时只会显示两位小数,有的时候需要根据业务来确定显示小数的位数.通过设置下面的属性可以达到我们想要的目的: text : '存煤量(万吨)', dataIn ...
- 字符串截取slice() substring() substr()的区别?
获取子字符串 slice() substr() substring() 不会修改字符串本身,他们只是返回一个基本类型的字符串值 var str='abcdefghijklmn'; ...
- 如何搭建MVC3与配置models层
1.1 新建项目 第一步:打开Vs2010界面,点击左上角文件,点击新建,选择项目 1.1(图1) 第二步:点击网站Web类型,选择ASP.net MVC3 Web应用程序,在名称中输入项目名称(解决 ...
- java 面试
115个Java面试题和答案——终极列表(上) 本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的章节分为上下两篇,第一 ...
- unwrap_uvw 笔记
<integer><Unwrap_UVW>.numberVerticesByNode <node>node --返回图顶点的对应于给定节点的Unwrap_UVW点总 ...
- SCALA常规练习C
package com.hengheng.scala abstract class Animal { def walk(speed : Int) def breathe() = { println(& ...
- KEIL C51的XBYTE关键字
The XBYTE macro allows you to access individual bytes in the external data memory of the 8051. You m ...