Bootstrap级联下拉菜单，你肯定用得到

小灰灰 2021-09-10 22:02 570阅读 0赞

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

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

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

### 一、界面效果 ###

选中状态  
![选中状态][20160325165006190]  
非选中状态（我是默认北京-北京）  
![这里写图片描述][20160325175239886]

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

### 二、使用方法 ###

#### ①、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这种方法获取，那么先预览一下代码吧！

package com.honzh.spring.controller;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.log4j.Logger;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    
    import com.honzh.biz.database.entity.City;
    import com.honzh.biz.database.entity.Option;
    import com.honzh.biz.database.entity.Provincial;
    import com.honzh.common.util.JsonUtil;
    import com.honzh.spring.service.CityService;
    import com.honzh.spring.service.ProvincialService;
    
    @Controller
    @RequestMapping(value = "/procity")
    public class ProcityController extends BaseController { 
        private static Logger logger = Logger.getLogger(ProcityController.class);
    
        /** * 当传递city_code，则表明下拉框要被选中，否则不选中 */
        @RequestMapping("")
        public void index(@RequestParam(value = "city_code", required = false) String city_code,
                @RequestParam(value = "pro_code", required = false) String pro_code, HttpServletResponse response) {
            try {
                logger.debug("获取所在地区" + city_code + ", 省" + pro_code);
    
                // 如果pro_code为””，则表明要获取城市菜单，否则获取市级菜单
                if (!pro_code.equals("")) {
                    Integer pro_id = ProvincialService.getInstance().getByProvincialcode(pro_code).getId();
                    List<City> citys = CityService.getInstance().getCitysByProvincialId(pro_id);
                    List<Option> coptions = new ArrayList<Option>(citys.size());
    
                    for (City city : citys) {
                        Option coption = new Option();
                        coption.setId(city.getId());
                        coption.setName(city.getCname());
                        coption.setValue(city.getCode());
    
                        // 市级菜单被选中
                        if (city_code != null && !city_code.equals("")) {
                            if (city.getCode().equals(city_code)) {
                                coption.setSelected("selected");
                            }
                        }
                        coptions.add(coption);
                    }
                    renderJson(response, coptions);
                } else {
                    List<Provincial> provincials = ProvincialService.getInstance().getProvincials();
    
                    // 转换成标准的option属性（name,value,selected）
                    List<Option> options = new ArrayList<Option>(provincials.size());
    
                    // 被选中的省市
                    // 则说明是展示页面，此时需要为省级菜单和市级菜单设置选择项
                    if (city_code != null && !city_code.equals("")) {
                        Provincial selected_provincial = ProvincialService.getInstance().getProvincialByCitycode(city_code);
    
                        pro_code = selected_provincial.getProcode();
                    } else {
                        pro_code = provincials.get(0) == null ? "" : provincials.get(0).getProcode();
                    }
    
                    for (Provincial provincial : provincials) {
                        Option option = new Option();
                        option.setId(provincial.getId());
                        option.setName(provincial.getProname());
                        option.setValue(provincial.getProcode());
    
                        if (!pro_code.equals("") && provincial.getProcode().equals(pro_code)) {
                            option.setSelected("selected");
                        }
    
                        options.add(option);
                    }
    
                    renderJson(response, JsonUtil.toJson(options));
                }
    
            } catch (Exception e) {
                logger.error(e.getMessage());
                logger.error(e.getMessage(), e);
    
                renderJson(response, null);
            }
        }
    
    }

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

#### ④、ProvincialService.java ####

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

package com.honzh.spring.service;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import com.honzh.biz.database.entity.City;
    import com.honzh.biz.database.entity.Provincial;
    import com.honzh.biz.database.mapper.ProvincialMapper;
    import com.honzh.common.spring.SpringContextHolder;
    
    public class ProvincialService { 
    
        private static Object lock = new Object();
        private static ProvincialService config = null;
    
        private ProvincialService() {
            provincials = new ArrayList<Provincial>();
    
            ProvincialMapper mapper = SpringContextHolder.getBean(ProvincialMapper.class);
            provincials.addAll(mapper.getProvincials());
        }
    
        public static ProvincialService getInstance() {
            synchronized (lock) {
                if (null == config) {
                    config = new ProvincialService();
                }
            }
            return (config);
        }
    
        public Provincial getByProvincialcode(String provincial_code) {
            for (Provincial provincial : provincials) {
                if (provincial.getProcode().equals(provincial_code)) {
                    return provincial;
                }
            }
            return null;
        }
    
        private List<Provincial> provincials = null;
    
        public List<Provincial> getProvincials() {
            return provincials;
        }
    
        public Provincial getProvincialByCitycode(String city_code) {
            City city = CityService.getInstance().getCityByCode(city_code);
    
            for (Provincial provincial : provincials) {
                if (provincial.getId().intValue() == city.getProid().intValue()) {
                    return provincial;
                }
            }
            return null;
        }
    
        public Provincial getProvincialByCode(String province_code) {
            for (Provincial provincial : provincials) {
                if (provincial.getProcode().equals(province_code)) {
                    return provincial;
                }
            }
            return null;
        }
    
    }

#### ⑤、renderJson方法 ####

/** * 如果出错的话，response直接返回404 */
        protected void renderJson(HttpServletResponse response, Object responseObject) {
            PrintWriter out = null;
            try {
                if (responseObject == null) {
                    response.sendError(404);
                    return;
                }
                // 将实体对象转换为JSON Object转换
                String responseStr = JsonUtil.toJson(responseObject);
                response.setCharacterEncoding("UTF-8");
                response.setContentType("application/json; charset=utf-8");
    
                out = response.getWriter();
                out.append(responseStr);
    
                logger.debug("返回是：" + responseStr);
            } catch (IOException e) {
                logger.error(e.getMessage());
                logger.error(e.getMessage(), e);
            } finally {
                if (out != null) {
                    out.close();
                }
            }
        }

--------------------

## 相关文章 ##

*  [git下载地址-Bootstrap关联select][git_-Bootstrap_select]

--------------------

> 感谢您阅读【[沉默王二的博客][Link 1]】，如果王二的博客给您带来一丝帮助或感动，我（也就是王二）将不甚荣幸。  
> 如果您碰巧喜欢，可以留言或者私信我，这将是我鼓捣更多优秀文章的最强动力。

[20160325165006190]: /images/20210506/bd2976dd149e45769809d11128646db4.png
[20160325175239886]: /images/20210506/afe929751b66488db41c6f70fdcec6fc.png
[git_-Bootstrap_select]: https://github.com/qinggee/procity
[Link 1]: http://blog.csdn.net/qing_gee