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 ...