Bootstrap级联下拉菜单,你肯定用得到(1)

简介: Bootstrap级联下拉菜单,你肯定用得到

今天我将介绍自定义的bootstrap级联下拉菜单(你肯定用得到),主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用。说实话,封装好一个通用的组件还是需要花费很多精力的和时间的,所谓通用,自然要考虑周全,叹!这次整理的Bootstrap关联select,里面也涉及到了很多jquery、ajax、springMVC等等知识点,可谓包罗万象!


首先,请允许我代表该自定义组件做一番小小的介绍。


“hi,你好,我叫yunm.combox.js,主人给我起的名字,其实呢,挺俗的。我主要通过为select组件增加两个自定义属性来完成相应的数据加载,数据请求使用了ajax,后端数据处理使用了springMVC(当然其他方式也可以,只需要返回对应的json数据即可),使用起来呢,就非常非常简单了!”


一、界面效果


选中状态

非选中状态(我是默认北京-北京)

image.png


当然了,从界面上完全看不出来一个组件封装的好坏,但至少,你感觉很简洁漂亮,那么好了,有了这层印象,你是否有兴趣继续看下去?我想答案是肯定的。


二、使用方法


①、procity.jsp


首先呢,在页面上加载yunm.combox.js(稍候介绍,至于其他的bootstrap的css和js,不在本章介绍范围内,略过),同时呢,创建两个select,具体格式见如下:

<script type="text/javascript" src="${ctx}/components/yunm/yunm.combox.js"></script>
<div class="form-group">
    <div class="row">
        <div class="col-md-6">
            <select name="province_code" class="form-control combox" ref="city_select"
                refUrl="${ctx}/procity?pro_code={value}&city_code=HSLY">
            </select>
        </div>
        <div class="col-md-6">
            <select name="city_code" id="city_select" class="form-control">
            </select>
        </div>
    </div>
</div>
<script type="text/javascript">
<!--
    $(function() {
        if ($.fn.combox) {
            $("select.combox", $p).combox();
        }
    });
//-->
</script>

我去,这么简单,你是否也有点小惊喜?没错,就这么简单。


两个select组件,一个为province_code、一个为city_code。

省级菜单上增加了两个属性。

ref指定关联菜单为市级菜单city_select

refUrl指定菜单获取数据的URL

pro_code作为获取市级数据的关键因子

{value}呢,则为通配符,稍候在介绍组件的时候继续讲到

city_code=HSLY,主要用于选中指定的省市菜单,诸如上文中的(河南、洛阳),如果不选中,则city_code=为空

class=”combox” 为该省级下拉框增加jquery选择器

页面加载完毕后执行combox组件的关键方法,下面详细介绍

②、yunm.combox.js


喏,现在我们来看看关键的组件内容吧!

(function($) {
    var _onchange = function(event) {
        var $ref = $("#" + event.data.ref);
        if ($ref.size() == 0)
            return false;
        var refUrl = event.data.refUrl;
        var value = encodeURIComponent(event.data.$this.val());
        YUNM.debug(value);
        $.ajax({
            type : 'POST',
            dataType : "json",
            url : refUrl.replace("{value}", value),
            cache : false,
            data : {},
            success : function(response) {
                $ref.empty();
                addHtml(response, $ref);
                $ref.trigger("change").combox();
            },
            error : YUNM.ajaxError
        });
    };
    var addHtml = function(response, $this) {
        var json = YUNM.jsonEval(response);
        if (!json)
            return;
        var html = '';
        $.each(json, function(i) {
            if (json[i]) {
                html += '<option value="' + json[i].value + '"';
                if (json[i].selected) {
                    html += ' selected="' + json[i].selected;
                }
                html += '">' + json[i].name + '</option>';
            }
        });
        $this.html(html);
    };
    $.extend($.fn, {
        combox : function() {
            return this.each(function(i) {
                var $this = $(this);
                var value = $this.val() || '';
                var ref = $this.attr("ref");
                var refUrl = $this.attr("refUrl") || "";
                if (refUrl) {
                    refUrl = refUrl.replace("{value}", encodeURIComponent(value));
                }
                if (refUrl) {
                    $.ajax({
                        type : 'POST',
                        dataType : "json",
                        url : refUrl,
                        cache : false,
                        data : {},
                        success : function(response) {
                            addHtml(response, $this);
                            if (ref && $this.attr("refUrl")) {
                                $this.unbind("change", _onchange).bind("change", {
                                    ref : ref,
                                    refUrl : $this.attr("refUrl"),
                                    $this : $this,
                                }, _onchange).trigger("change");
                            }
                        },
                        error : YUNM.ajaxError
                    });
                }
            });
        }
    });
})(jQuery);
相关文章
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap下拉菜单与选项卡
Bootstrap下拉菜单与选项卡
N..
55 1
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
Bootstrap5 下拉菜单7
按钮组中可以嵌入下拉菜单,实现更多功能选项。示例展示了水平和垂直按钮组中添加下拉菜单的方法,通过 `dropdown-toggle` 类和 `data-bs-toggle=&quot;dropdown&quot;` 属性实现下拉效果。
|
10天前
|
前端开发
Bootstrap5 下拉菜单5
此示例展示了如何使用 Bootstrap 的 `dropstart` 类创建一个向左弹出的下拉菜单。通过在 `div` 元素上添加 `dropstart` 类,可以实现下拉菜单从按钮左侧弹出的效果。菜单包含三个链接项。
Bootstrap5 下拉菜单6
使用 `.dropdown-item-text` 类可以在下拉菜单中添加纯文本项,
|
10天前
Bootstrap5 下拉菜单4
要使上拉菜单向上弹出,可在 div 元素中添加 &quot;dropup&quot; 类。示例代码包括一个按钮和一个包含三个链接的下拉菜单列表。当点击按钮时,菜单将向上弹出。
|
10天前
Bootstrap5 下拉菜单3
下拉菜单默认向下弹出,但可以通过添加类 `.dropdown-menu-end` 实现向右下方弹出。示例代码展示了如何创建一个向右下方弹出的下拉菜单按钮,包含三个链接项。
|
11天前
|
移动开发
Bootstrap5 下拉菜单2
`.dropdown-header` 类用于在下拉菜单中添加标题,例如:`&lt;li&gt;&lt;h5 class=&quot;dropdown-header&quot;&gt;标题 1&lt;/h5&gt;&lt;/li&gt;`。`.active` 类可使选项高亮显示,`.disabled` 类可禁用选项。下拉菜单可通过添加 `.dropend` 或 `.dropstart` 类实现右对齐或左对齐。示例代码展示了如何使用这些类。
|
11天前
Bootstrap5 下拉菜单1
Bootstrap5 下拉菜单是可切换的上下文菜单,以列表形式显示链接。通过 `.dropdown` 类指定下拉菜单,按钮或链接需添加 `.dropdown-toggle` 和 `data-bs-toggle=&quot;dropdown&quot;` 属性。实际下拉菜单使用 `.dropdown-menu` 类,选项添加 `.dropdown-item` 类。`.dropdown-divider` 类用于创建水平分割线。
|
前端开发
Bootstrap 下拉菜单事件
Bootstrap 下拉菜单事件