Bootstrap框架----地址联动--选择地址

来源：互联网发布：java modbus与rs485 编辑：程序博客网时间：2024/06/05 09:24

我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录地址联动输入用法。

应用bootstrap模板

基础项目源码下载地址为:

SpringMVC+Shiro+MongoDB+BootStrap基础框架

我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面和index的路由Controller上做修改，实现地址联动输入用法。

引用cxselect资源

cxselect是一个jQuery的插件，封装了联动处理的功能，我们这里的城市联动选择也由这个插件来提供，所以需要先引用。

初始化cxselect

jsp中的占位符

 <div class="col-sm-8 input-group" id="districtInfo">                      <select class="province form-control" style="width:90px" id="province" name="province"></select>                      <select class="city form-control" style="width:90px" id="city" name="city"></select>                      <select class="area form-control" style="width:90px" id="area" name="area"></select>                    </div>

使用代码初始化

<script type="text/javascript">  $.cxSelect.defaults.url = '/res/assets/js/cityData.min.json';$.cxSelect.defaults.emptyStyle = 'none';$('#districtInfo').cxSelect({  url: '/res/assets/js/cityData.min.json',               // 如果服务器不支持 .json 类型文件，请将文件改为 .js 文件  selects: ['province', 'city', 'area'],  // 数组，请注意顺序  emptyStyle: 'none'});</script>

示例代码

完整的html

<%@ include file="./include/header.jsp"%>  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>          <div id="page-wrapper">              <div id="page-inner">                          <div class="row">                      <div class="col-md-12">                          <h1 class="page-header">                新增 <small>示例</small>                          </h1>                      </div>                  </div>                                                                  <!-- /. ROW  -->       <div class="col-md-10 col-sm-10 col-xs-12 " style="margin-top: 30px">            <form class="form-horizontal" id="referenceDocument" action="/add" method="post">                <div class="form-group">                    <label for="ss" class="col-sm-2 control-label">城市:</label>                    <div class="col-sm-8 input-group" id="districtInfo">                      <select class="province form-control" style="width:90px" id="province" name="province"></select>                      <select class="city form-control" style="width:90px" id="city" name="city"></select>                      <select class="area form-control" style="width:90px" id="area" name="area"></select>                    </div>                </div>                <div class="form-group">                    <div class="col-sm-6 col-sm-offset-2">                        <button type="button" class="btn btn-default cancel"                                data-dismiss="modal">取消                        </button>                        <button type="submit" class="btn btn-primary save"                                data-loading-text="Saving...">确认                        </button>                    </div>                </div>            </form>        </div>        <!-- /. ROW  -->               </div>              <!-- /. PAGE INNER  -->          </div>          <!-- /. PAGE WRAPPER  -->   <%@ include file="./include/footer.jsp"%>   <script src="/res/assets/js/jquery.cxselect.js"></script> <script type="text/javascript">  $.cxSelect.defaults.url = '/res/assets/js/cityData.min.json';$.cxSelect.defaults.emptyStyle = 'none';$('#districtInfo').cxSelect({  url: '/res/assets/js/cityData.min.json',               // 如果服务器不支持 .json 类型文件，请将文件改为 .js 文件  selects: ['province', 'city', 'area'],  // 数组，请注意顺序  emptyStyle: 'none'});</script>  </body>  </html>

后端接收代码IndexController.java

package com.test.web.controller;import java.io.IOException;import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;/** * IndexController *  *  */@Controllerpublic class IndexController {@Value("${version.name:}")private String version;@RequestMapping("/")public String index(Model model) throws IOException {          model.addAttribute("version", version);return "/index";}    @RequestMapping(value="/add",method=RequestMethod.POST)        public String login(@RequestParam String province,@RequestParam String city,@RequestParam(defaultValue="") String area){            System.out.println(province+city+area);            return "/index";        }  }

需要注意的是直辖市北京等只有到区也就是没有 area字段。界面上操作时也只会显示到第二级。

效果如图

阅读全文

0 0