Bootstrap Table表格中存放下拉框，读取数据填充到下拉框

       初学Bootstarp，个人感觉一个功能非常强大的前端框架，由于学习的路途也不是一番风顺的，难免会遇到问题，将遇到的问题整理，可以时常看看，加深记忆。

       最近做表格需要在表格中加入<select>标签，将数据填充到下拉框，无奈搞了好几个小时也没有成功，最后经过请教身边的大佬，得以解决。

代码如下:

HTML页面代码

<!-- 查询条件 -->	
<div class="col-sm-12">
    <div class="panel panel-default" style="margin-top: 10px">
        <div class="panel-heading">
            <h3 class="panel-title">查询条件</h3>
        </div>
        <div class="panel-body">
            <form id="formSearch" class="form-inline">
                <div class="form-group">
                    <label for="countySearch" class="control-label mglf5" style="font-size:15px;">区域</label>
                    <select class="form-control mglf3" id="countySearch" style="width:160px;"></select>
                </div>
                <div class="form-group">
                    <label for="pollSourceSearch" class="control-label mglf5" style="font-size:15px;">企业名称</label>
                    <select class="form-control mglf3" id="pollSourceSearch" style="width:160px;"></select>
                </div>
                <div class="form-group">
                    <div class="input-append date form_datetime" data-date-format="yyyy-mm-dd">
                        <label for="erbStartTime" class="control-label mglf5" style="font-size:15px;">时间</label>
                        <input id="erbStartTime" readonly size="16" type="text" value="" class="form-control mglf3"/>
                        <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-append date form_datetime" data-date-format="yyyy-mm-dd">
                        <label for="erbEndTime" class="control-label mglf5">-&nbsp;-&nbsp;</label>
                        <input id="erbEndTime" readonly size="16" type="text" value="" class="form-control mglf3"/>
                        <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                </div>
                <button type="button" class="btn btn-default mglf5" id="search">
                	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
                </button>
                <button id="btn_export" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-export" aria-hidden="true"></span>导出
                </button>
            </form>
        </div>
	</div>
	<input type="hidden" id="moveToControlId">
	<table id="tb_evokeReceBoxList" style="table-layout:fixed"></table>
</div>

其中<table id="tb_evokeReceBoxList" style="table-layout:fixed"></table>是Bootatrp Table的表格数据展示及分页;

JS代码

function showFeedBack() {
    $("#tableList").bootstrapTable({
        url : '', //请求后台的url(*)
        method : 'post', //请求方式(*)
	toolbar : '#toolbar', //工具按钮用哪个容器
	striped : true, //是否显示行间隔色
	contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
	cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性(*)
	dataType : "json",
	pagination : true, //是否显示分页(*)
	sortable : true, //是否启用排序
	sortOrder : "asc", //排序方式
	queryParams : queryContentParams, //传递参数(*)
	sidePagination : "server", //分页方式：client客户端分页，server服务端分页(*)
	pageNumber : 1, //初始化加载第一页，默认第一页
	pageSize : 10, //每页的记录行数(*)
	pageList : [10, 25, 50, 100], //可供选择的每页的行数(*)
	search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务器
	strictSearch : true,
	showColumns : false, //是否显示所有的列
	showRefresh : false, //是否显示刷新按钮
	minimumCountColumns : 2, //最少允许的列数
	clickToSelect : true, //是够启用点击选中行
	uniqueId : "problemId", //每一行的唯一标识，一般为主键列
	showToggle : false, //是否显示详细视图和列表视图的切换按钮
	cardView : false, //是否显示详细视图
	detailView : false, //是否显示父子表
        columns: [{
            checkbox: true,
            width : 35
        },{
            field: 'registerNumber',
            align: 'center',
            title: '立案号',
            width : 160,
            formatter: function (value, row, index) {// selNumber'+ row.registerId + '
            	var option;
            	//立案号下拉框
            	$.ajax({
            	    url: '后台Controller请求',
                    type: "post",
                    data : {},
                    async : false,
                    success:function(data){
                    	var headOption = "<option value =''>请选择</option>";
                    	if(value == "0"){
                    		headOption = headOption + "<option value ='0' selected>无</option>";
                    	}else{
                    		headOption = headOption + "<option value ='0'>无</option>";
                    	}
                        $.each(data,function(i,obj){
                    		if(value == obj.registerId){
                    			headOption = headOption + "<option value='"+obj.registerId+"' selected>"+obj.registerNumber+"</option>";
                    		}else{
                    			headOption = headOption + "<option value='"+obj.registerId+"'>"+obj.registerNumber+"</option>";
                    		}
            	        });
                	option = '<select class="form-control" id="selNumber"'+index+' name="registerName" style="height:33px;">'+
                        headOption + '</select>' +'<button class="btn btn-default" onclick="addNumber()">添加</button>';
                    }
                })
                return option;
            }
         }]
    }

       因为table表格是循环出来的，所以<select>标签中的ID不能重复，所以我拼接了id="selNumber"'+index+' 将每一行的下标作为下拉框每条数据匹配的标识。

奉上效果图: