<!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 多选下拉框实例的更多相关文章

  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. 什么是mimeType?

    因特网多媒体邮件扩展标示内容是什么格式.告诉浏览器或者server如何解析该数据http的请求和相应都含有一个mimeType字段 =>content-type(通用首部)

  2. 【转】iOS Developer：真机测试

    摘要 申请真机调试证书全过程,最新更新:2014-05-19 2014-10-16记:由于现在 itunes 更新变化较大,本文可能不能很好地解决您的问题,而我现在不负责公司的发布调试问题,暂未及时更 ...

  3. iOSUI基础——懒加载

    1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再去进行实例化 ...

  4. JTree用法及JTree使用经验总结

    import  java.awt.Dimension; import  java.awt.Color; import  javax.swing.JFrame; import  javax.swing. ...

  5. 30.SSH配置文件模板.md

    [toc] 1.struts2 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts ...

  6. 【USACO 3.1.4】形成的区域

    [描述]         N个不同的颜色的不透明的长方形(1 <= N <= 1000)被放置在一张宽为A长为B的白纸上.这些长方形被放置时,保证了它们的边于白纸的边缘平行.所有的长方形都 ...

  7. UVA 10285 - Longest Run on a Snowboard (记忆化搜索+dp）

    Longest Run on a Snowboard Input: standard input Output: standard output Time Limit: 5 seconds Memor ...

  8. css行级块级区别总结摘录

    一.块级元素:block element 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外).两个块级元素连续编辑时,会在页面自动换行显示.块级元素一 ...

  9. javascript 判断是否是PC还是手机端

    function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("Android" ...

  10. 用soaplib的django webserver

    前面写过怎么利用suds来调用webservicePython调用基于https协议的SOAP WebService,这篇讲的是如何用soaplib开发SOAP WebService(最近发现国外开源 ...