Bootstrap框架的下拉框动态从后台查询数据的实现方式，不多BB，直接上源码：
前台页面：
<%-- Created by IntelliJ IDEA. User: 69420 Date: 2017/8/7 Time: 15:42 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>查询</title> <meta charset="utf-8"> <link rel="stylesheet" href="${pageContext.request.contextPath}/bs/ztree/css/metroStyle/metroStyle.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/bs/fileinput/css/fileinput.min.css"> <script src="${pageContext.request.contextPath}/bs/plugins/datepicker/bootstrap-datepicker.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/bs/fileinput/js/fileinput.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/bs/fileinput/js/locales/zh.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath}/bs/plugins/datepicker/datepicker3.css"> <!-- datepicker 依赖start --> <script src="${pageContext.request.contextPath}/bs/plugins/datepicker/bootstrap-datepicker.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath}/bs/plugins/datepicker/datepicker3.css"> <!-- datepicker end --> <!-- daterangepicker依赖 start--> <link rel="stylesheet" href="${pageContext.request.contextPath}/bs/plugins/daterangepicker/daterangepicker.css"> <script src="${pageContext.request.contextPath}/bs/plugins/daterangepicker/moment.js"></script> <script src="${pageContext.request.contextPath}/bs/plugins/daterangepicker/daterangepicker.js"></script> <!-- datarangepicker依赖 end --> </head> <%-- Created by IntelliJ IDEA. User: 69420 Date: 2017/8/7 Time: 15:42 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>----查询</title> <meta charset="utf-8"> <link rel="stylesheet" href="${pageContext.request.contextPath}/bs/ztree/css/metroStyle/metroStyle.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/bs/fileinput/css/fileinput.min.css"> <script src="${pageContext.request.contextPath}/bs/plugins/datepicker/bootstrap-datepicker.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/bs/fileinput/js/fileinput.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/bs/fileinput/js/locales/zh.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath}/bs/plugins/datepicker/datepicker3.css"> <!-- datepicker 依赖start --> <script src="${pageContext.request.contextPath}/bs/plugins/datepicker/bootstrap-datepicker.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath}/bs/plugins/datepicker/datepicker3.css"> <!-- datepicker end --> <!-- daterangepicker依赖 start--> <link rel="stylesheet" href="${pageContext.request.contextPath}/bs/plugins/daterangepicker/daterangepicker.css"> <script src="${pageContext.request.contextPath}/bs/plugins/daterangepicker/moment.js"></script> <script src="${pageContext.request.contextPath}/bs/plugins/daterangepicker/daterangepicker.js"></script> <!-- datarangepicker依赖 end --> </head> <body> <label for="comcode" class="col-xs-1 control-label">机构代码</label> <div class="col-xs-2"> <%--<select class="form-control select2" name="comcode" id="comcode"> <option selected="selected" value="">全部</option> <option value="330000">330000-总公司</option> <option value="110001">110001-业务部</option> <option value="210001">210001-市场部</option> <option value="220001">220001-国际部</option> <option value="330003">330003-风险部</option> </select>--%> <select id="comcode" name="comcode" class="form-control select2" title="请选择"> <option selected="selected" value="">全部</option> </select> </div> <script> $(function(){ //初始化下拉框 //动态加载 $.ajax({ type: 'post', url: '/outStanding/getComecode', dataType: "json", success: function (data) { //拼接下拉框 for(var i=0;i<data.length;i++){ $("#comcode").append("<option value= '"+data[i].comcode+"'>" +data[i].comcode +"-"+data[i].comname+"</option>"); } } }); </script> </body> </html>
后端代码：
/** * 获取机构代码 * @return */ @RequestMapping(value="getComecode") @ResponseBody public List<ComcodeVo> getComecode(){ List<ComcodeVo> list = new ArrayList<ComcodeVo>(); list.add(new ComcodeVo("330000","有限公司")); list.add(new ComcodeVo("330001","领导")); list.add(new ComcodeVo("330002","组织部")); list.add(new ComcodeVo("330005","管理部")); list.add(new ComcodeVo("330009","办公室")); list.add(new ComcodeVo("330003","业务部")); list.add(new ComcodeVo("110001","集团部")); list.add(new ComcodeVo("210001","市场部")); list.add(new ComcodeVo("220001","国际部")); list.add(new ComcodeVo("230001","人身部")); list.add(new ComcodeVo("330004","运营部")); list.add(new ComcodeVo("330008","信息部")); list.add(new ComcodeVo("330006","合规部")); list.add(new ComcodeVo("330007","审计部")); return list; }