bootstarp动态下拉框的实现

    <div>
      <div class="col-sm-4">
        <table id="smstable" class="table table-bordered"></table>
    </div>
    <div class="col-sm-4" align="right">
    <div style="width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; position: relative; background: transparent;"
            id="querySmsGatewayStatistics">
    </div>
    </div>
    </div>

$(function() { var start = { elem : '#queryDate', //选择ID为START的input format : 'YYYY-MM-DD', //自动生成的时间格式 min : '1999-01-01', //设定最小日期为当前日期 max : laydate.now(), //最大日期 istime : true, //必须填入时间 istoday : true, //是否是当天 start : laydate.now(0, "YYYY-MM-DD") //设置开始时间为当前时间 }; laydate(start); }); /* 初始化表格 */ $(function() { var table = new smstable(); table.init(); }); var smstable = function() { var tabledemo = new Object(); tabledemo.init = function() { $('#smstable').bootstrapTable({ url : "<%=request.getContextPath()%>/SmsGatewayStatistics/SmsGatewayStatistics1.do",// 请求的HTML页的URL地址。 data : {"queryDate" : $("queryDate").val()},//(Map) :发送至服务器的 key/value 数据 type : "POST",//客户端请求的类型(JSON,XML,等等) dataType : "json", columns : [ {field : 'orgId',title : '渠道编码'}, {field : 'orgName',title : '渠道名称'}, {field : 'amount',title : '总量'} ], }); }; return tabledemo; } /* 总量echarts图 */ var myChart = echarts.init(document.getElementById('querySmsGatewayStatistics')); function initCharts(){ $.ajax({ url:"<%=request.getContextPath()%>/SmsGatewayStatistics/SmsGatewayStatistics1.do", data:{"queryDate" : $("#queryDate").val()}, type:"POST", success:function(json){ var orgId = [];//渠道编码 var orgName = [];//渠道名称 var amount = [];//总量 /* 循环除数组的数据 */ for(var i = 0;i<json.length;i++){ orgId[i] = json[i].orgId;//渠道编码 orgName[i] = json[i].orgName;//渠道名称 amount[i] = json[i].amount;//总量 } /* 柱状图 */ option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['总量'] //表头数据 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['${orgName}'] //x轴现实的数据 } ], yAxis : [ { type : 'value' } ], series : [ { name:'总量', type:'bar', data:amount,//这里写变量值 markLine : { lineStyle: { normal: { type: 'dashed' } }, } } ] }; //封装以上属性 myChart.setOption(option , function (param){ var hz = param.name; alert(hz) }); //查看一个对象中拥有的属性 myChart.on("click", function (param){ var ob = eval(param); var Property=""; var hz = param.name; var hzz = param.seriesIndex; alert(hz) alert(hzz) }); } //对应success })//对应ajax }//对应function

我的实现思路是:在数据库中查询出来的数据动态的展示到下拉框里边,当用户点击这个下拉框的时候地下表格里边弹出的是点击节点工程的表格数据,