Bootstrap每天必学之级联下拉菜单(bootstrap基础教程)

编辑：rootadmin

推荐整理分享Bootstrap每天必学之级联下拉菜单(bootstrap基础教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:bootstrap怎么学,bootstrap学习,bootstrap怎么学,bootstrap要学多久,bootstrap怎么学,bootstrap要学到什么程度,bootstrap要学到什么程度,bootstrap要学到什么程度,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

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

一、界面效果

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

二、使用方法

①、procity.jsp

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

·两个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

现在我们来看看关键的组件内容吧！

·通过$.extend($.fn, { combox : function() {为jquery增加一个叫combox的底层(可以查询jquery帮助文档)方法。·通过(function($){_onchange、addHtml})(jQuery);为该组件在页面初始加载时创建两个方法onchange和addHtml，至于(function($) {})(jQuery);我想你如果不了解的话，赶紧百度吧！·先来看combox 方法获取ref、refUrl，通过ajax向refUrl请求省级菜单数据，当获取成功后，通过addHtml方法将json转换后的option绑定到省级菜单select上然后呢，为省级菜单select绑定change事件，传递的参数为ref（市级菜单）、refUrl（市级数据获取的url）、$this（省级菜单，便于change事件获取对应选中项，如效果图中的河南）通过trigger方法立即执行change事件，便于获取对应的市级菜单内容。·再来看_onchange方法，主要是点击省级菜单时触发，用于获取市级菜单列表 refUrl，向服务端请求的URL value，用于获取省级菜单的选中项目，然后通过该value值获取省级对应的市级菜单 $ref.empty();用于清空市级菜单通过ajax继续获取市级菜单内容，然后通过addHtml方法添加到市级菜单中。·addHtml方法通过jsonEval方法对服务端传递回来的数据进行eval（eval('(' + data + ')')，如有不懂，可百度）方法处理，否则会出错。 $.each(json, function(i) {遍历json，通过jquery创建option对象，然后加入到select中。

③、ProcityController

前端介绍完了，我们回到后端进行介绍，当然了，你也可以忽略本节，因为不是所用的关联数据都通过springMVC这种方法获取，那么先预览一下代码吧！

@RequestParam(value = "city_code", required = false) String city_code，对于RequestParam注解，其实非常好用，这里就不多做解释，只是推广一下，固定个数的参数，用该注解更易于代码的维护。ProvincialService类、CityService类就是两个单例，尽量把数据放置在内存当中，减少查询数据库的次数，稍候贴出来一个例子。Option类就是单纯的封装前端option组件的关键属性，便于组件的通用化。renderJson(response, JsonUtil.toJson(options));将数据json化后返回，稍候贴上详细代码。

④、ProvincialService.java

只贴出来代码例子，不做详细解释，毕竟不是本章重点。

⑤、renderJson方法

如果大家还想深入学习，可以点击jQuery级联菜单特效汇总、Javascript级联菜单特效汇总进行学习。

如果大家还想深入学习Bootstrap，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

本文系列教程整理到：Bootstrap基础教程专题中，欢迎点击学习。

标签: bootstrap基础教程

本文链接地址:https://www.jiuchutong.com/biancheng/375972.html 转载请保留说明！

上一篇：详解javascript跨浏览器事件处理程序(js处理跨域方式及原理)

下一篇：JavaScript html5 canvas绘制时钟效果(二)