Bootstrap每天必学之级联下拉菜单_javascript技巧

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

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

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

一、界面效果

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

二、使用方法

①、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);

·通过$.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();
 }
 }
 }

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索bootstrap下拉菜单
， Bootstrap菜单
Bootstrap级联下拉
bootstrap 级联下拉框、bootstrap 级联下拉、bootstrap级联菜单、bootstrap 级联select、bootstrap省市级联，以便于您获取更多的相关知识。

时间： 2024-11-17 01:06:21

Bootstrap每天必学之级联下拉菜单_javascript技巧的相关文章

Bootstrap+jfinal实现省市级联下拉菜单_javascript技巧

小小一个省市级关联菜单,却耗费了一个很多时间来摸索,原因在于对jquery不熟练,既然这么辛苦完成了一个组件,自然想要共享出来,让需要的人使用. 这只是一个基础版,后续还要再进行优化. 代码:省市级关联菜单下载地址 说明: sql语句就不再说了,里面有"city.sql"."provincial.sql"两个文件. 1.先说说获取数据 public void initProcitys() { logger.info("获取所在地区"); List

一个最简单的级联下拉菜单_javascript技巧

人物地理野生动物科技静物设计新闻宠物植物娱乐生活亮点体育日常生活旅行聚会婚庆节日美女写真人体摄影网友自拍演艺明星体育明星政坛名人其它

Bootstrap导航条可点击和鼠标悬停显示下拉菜单_javascript技巧

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

Bootstrap布局组件教程之Bootstrap下拉菜单_javascript技巧

本章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title>

Bootstrap CSS组件之按钮下拉菜单_javascript技巧

按钮下拉菜单 结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果,就类似于单击一个button按钮,然后显示隐藏的下拉菜单. 组合式下拉菜单 分离式下拉菜单 向上弹起的下拉菜单 //源码,css实现方式主要是设置.dropdown-menu样式容器的bottom为100% .dropup .dropdown-menu,

javascript支持区号输入的省市二级联动下拉菜单_javascript技巧

省市二级联动下拉菜单,增加了区号输入.多组选项共用一组数据. 选择地区,可以获取区号,填写区号自动选取地区. 某些地市的区号收集中. 省份选择城区 省份选择城区 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

JS中用三种方式实现导航菜单中的二级下拉菜单_javascript技巧

我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片.那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style

最简单js代码实现select二级联动下拉菜单_javascript技巧

本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.

Google Suggest ;-) 基于js的动态下拉菜单_javascript技巧

基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,并通过列表点选将选定项放到搜索框中.能这么快的能将所有相关关键词的检索数列出,看来所有的提示词已经提前进行了预搜索和数量记录.试了一下"sex",没有相关检索提示,看来对搜索词进行了严格的色情过滤. 另外:这一动态列表功能也应用在GMail的地址栏自动输入完成中,如图:Google自动完成的源代码如下: // Copyright 2004 and onwards Google Inc. var w