1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  6.         <meta name="apple-mobile-web-app-capable" content="yes">
  7.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8.         <meta name="format-detection" content="telephone=no">
  9.         <title>三级联动多选下拉框</title>
  10.         <script src="<?php echo base_url() ?>js/jquery-1.7.2.min.js"></script>
  11.         <link href="<?php echo base_url(); ?>css/buildfair/jquery-ui.css" rel="stylesheet" />
  12.         <script src="<?php echo base_url() ?>js/jquery-ui.min.js"></script>
  13.         <script src="<?php echo base_url() ?>js/jquery.multiselect.min.js"></script>
  14.         <script src="<?php echo base_url() ?>js/jquery.multiselect.zh-cn.js"></script>
  15.         <link href="<?php echo base_url(); ?>css/buildfair/jquery.multiselect.css" rel="stylesheet"/>
  16.  
  17.         <script src="<?php echo base_url() ?>js/jquery.multiselect.filter.js"></script>
  18.         <link href="<?php echo base_url(); ?>css/buildfair/jquery.multiselect.filter.css" rel="stylesheet"/>
  19.  
  20.     </head>
  21.     <body>
  22.         <div>
  23.             <p>多选下拉框：</p>
  24.             <select id="first_dist" multiple="multiple" data-level="1" style="display: none;">
  25.                 <?php foreach ( $firstDist as $row ): ?>
  26.                     <option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option>
  27.                 <?php endforeach; ?>
  28.             </select>
  29.             <select id="second_dist" multiple="multiple" data-level="2" style="display: none;">
  30.             </select>
  31.             <select id="third_dist" multiple="multiple" data-level="3" style="display: none;">
  32.             </select>
  33.             <select id="fourth_dist" multiple="multiple" data-level="4" style="display: none;">
  34.             </select>
  35.             <br/>
  36.         </div>
  37.         <div>
  38.             <p>单选下拉框：</p>
  39.             <select id="first_dist_single" style="display: none;">
  40.                 <?php foreach ( $firstDist as $row ): ?>
  41.                     <option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option>
  42.                 <?php endforeach; ?>
  43.             </select>
  44.         </div>
  45.  
  46.         <div>
  47.             <p>单选下拉框（带搜索功能）：</p>
  48.             <select id="first_dist_single_filter" style="display: none;">
  49.                 <?php foreach ( $firstDist as $row ): ?>
  50.                     <option value="<?php echo $row[ 'id' ]; ?>"><?php echo $row[ 'name' ]; ?></option>
  51.                 <?php endforeach; ?>
  52.             </select>
  53.         </div>
  54.     </body>
  55. </html>
  1. <script>
  2.     (function() {
  3.         // 默认只显示选择了的3个
  4.         var DEF_SHOW_SELELCTED_NUMBER = 3;
  5.  
  6.         $("#first_dist_single").multiselect({
  7.             multiple: false,
  8.             header: "选择一项",
  9.             selectedList: 1
  10.         });
  11.  
  12.         $("#first_dist_single_filter").multiselect({
  13.             multiple: false,
  14.             noneSelectedText: "请选择",
  15.             selectedList: 1
  16.         }).multiselectfilter();
  17.  
  18.         $("#first_dist").multiselect({
  19.             selectedList: DEF_SHOW_SELELCTED_NUMBER,
  20.             noneSelectedText: '请选择省市',
  21.             close: function(event, ui) {
  22.                 showNextDist($(this));
  23.             }
  24.         }
  25.         );
  26.         var showNextDist = function(obj) {
  27.             var level = obj.data('level'),
  28.                     nextLevel = parseInt(level) + 1,
  29.                     nextDistNode = null, defaultText = '';
  30.             if (parseInt(nextLevel) === 2) {
  31.                 nextDistNode = $('#second_dist');
  32.                 defaultText = '请选择市县';
  33.             } else if (parseInt(nextLevel) === 3) {
  34.                 nextDistNode = $('#third_dist');
  35.                 defaultText = '请选择地级市';
  36.             } else if (parseInt(nextLevel) === 4) {
  37.                 nextDistNode = $('#fourth_dist');
  38.                 defaultText = '请选择区镇';
  39.             }
  40.             var selectedArr = obj.multiselect("getChecked").map(function() {
  41.                 return this.value;
  42.             }).get();
  43.             var selectedVal = selectedArr.join(',');
  44.             if (selectedVal !== '') {
  45.                 var url = '<?php echo site_url(); ?>/m/buildfair/get_district';
  46.                 $.post(url, {upid: selectedVal, level: nextLevel}, function(data) {
  47.                     if (data.success) {
  48.                         var srcData = data.data;
  49.                         if (nextDistNode !== null && srcData.length > 0) {
  50.                             nextDistNode.html('');
  51.                             for (index in srcData) {
  52.                                 var opt = srcData[index]
  53.                                 nextDistNode.append('<option value="' + opt.id + '">' + opt.name + '</option>');
  54.                             }
  55.                             nextDistNode.multiselect({
  56.                                 selectedList: DEF_SHOW_SELELCTED_NUMBER,
  57.                                 noneSelectedText: defaultText,
  58.                                 close: function(event, ui) {
  59.                                     showNextDist(nextDistNode);
  60.                                 }
  61.                             }).multiselect('refresh');
  62.                         }
  63.                     }
  64.                 }, 'json');
  65.             } else {
  66.                 if (nextDistNode !== null) {
  67.                     nextDistNode.multiselect().multiselect("destroy").hide();
  68.                     var nextDistLevel = nextDistNode.data('level');
  69.                     if (parseInt(nextDistLevel) === 2) {
  70.                         $('#third_dist').multiselect().multiselect("destroy").hide();
  71.                         $('#fourth_dist').multiselect().multiselect("destroy").hide();
  72.                     } else if (parseInt(nextDistLevel) === 3) {
  73.                         $('#fourth_dist').multiselect().multiselect("destroy").hide();
  74.                     }
  75.                 }
  76.             }
  77.         }
  78.  
  79.     })();
  80. </script>

注：记得要引入相关的js和css文件。如果不知道去哪找，这里有个链接，在里面可以找到：

http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#basic

js：jquery multiSelect 多选下拉框实例的更多相关文章

  1. jquery.multiselect 多选下拉框实现

    第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的 ...

  2. multiselect多选下拉框

    具体实现 <input type="hidden" id="q_dueDay" name="q_dueDay" value=" ...

  3. jQuery自定义多选下拉框

    项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如 ...

  4. jQuery UI 多选下拉框插件：jquery-ui-multiselect

    前一个项目,由于项目需求,需要大量使用到下拉多选框,而由于本人又不会写有关 CSS 样式,所以,便上网找到了这个 jQuery 插件:jquery-ui-multiselect .该款插件提供了基本下 ...

  5. 【学亮IT手记】angularJS+select2多选下拉框实例

     永远保持对大部分知识的好奇心,学习从不枯燥,也没有被逼学习一说,乐此不疲才是该有的心态和境界!!! 引入相关js库: html部分代码: angularJS定义数据源变量:

  6. js多选下拉框

    1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...

  7. bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

    bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式  二.HTML代码 <select id="msgRoles" multiple=&q ...

  8. Jquery ajax 绑定multiselect多选下拉选项,同时异步执行返回值

    Jquery ajax 绑定multiselect多选下拉选项,同时异步执行获取返回值 function load(mslt_employees,belongto,mark) {//传入$(#ID) ...

  9. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

随机推荐

  1. LINUX 内核代码 errno 错误代码提示 /include/asm/errno.h

    首先在自己的程序中#include<errno.h> 添加打印errno的语句 printf("errno is: %d\n",errno); 根据errno的值查错. ...

  2. big_table练习数据表

    big_table练习数据表 create table big_table as select rownum id, a.* from all_objects a / alter table big_ ...

  3. TCP/IP-IP

    A contented mind is a perpetual feast. "知足长乐" 参考资料:TCP/IP入门经典 (第五版) TCP/IP详解 卷一:协议 一.简介 IP ...

  4. Extjs中numberfield小数位数设置

    在默认的情况下,使用numberfield控件时只会显示两位小数,有的时候需要根据业务来确定显示小数的位数.通过设置下面的属性可以达到我们想要的目的: text : '存煤量(万吨)', dataIn ...

  5. 字符串截取slice() substring() substr()的区别？

    获取子字符串 slice()        substr()    substring() 不会修改字符串本身,他们只是返回一个基本类型的字符串值 var str='abcdefghijklmn'; ...

  6. 如何搭建MVC3与配置models层

    1.1 新建项目 第一步:打开Vs2010界面,点击左上角文件,点击新建,选择项目 1.1(图1) 第二步:点击网站Web类型,选择ASP.net MVC3 Web应用程序,在名称中输入项目名称(解决 ...

  7. java 面试

        115个Java面试题和答案——终极列表(上) 本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的章节分为上下两篇,第一 ...

  8. unwrap_uvw 笔记

    <integer><Unwrap_UVW>.numberVerticesByNode <node>node --返回图顶点的对应于给定节点的Unwrap_UVW点总 ...

  9. SCALA常规练习C

    package com.hengheng.scala abstract class Animal { def walk(speed : Int) def breathe() = { println(& ...

  10. KEIL C51的XBYTE关键字

    The XBYTE macro allows you to access individual bytes in the external data memory of the 8051. You m ...