js：jquery multiSelect 多选下拉框实例

最新推荐文章于 2020-12-19 13:37:46 发布

ZYaller

最新推荐文章于 2020-12-19 13:37:46 发布

阅读量4.5k

点赞数

分类专栏： Javascript 文章标签： jquery multiSelect 多选下拉框实例

本文链接：https://blog.csdn.net/zyb_icanplay7/article/details/9251887

版权

Javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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