选择第一个下拉框，第二个跟着刷新数据，实现联动刷新

Question

 <script type="text/javascript">
var dirMap = new Map();
var uppeakMap = new Map();
var downpeakMap = new Map();
var timeMap = new Map();
$(function(){
    debugger
    init();
    var data = ${data};

    initEchart(data)
    //切换方向下拉框
    $("#dirSelect").change(function(){

        var dirid = $(this).val();
        debugger
        var peakid = $("#peaksetionSelect option:selected").val();

        debugger
        createPeakSelect(dirMap.get(dirid));
        getData(peakid,dirid);
    });
    //切换峰段下拉框
    $("#peaksetionSelect").change(function(){

        var peakid = $(this).val();
        var dirid = $("#dirSelect option:selected").val();
        getData(peakid,dirid);
    });
});

function getData(peakid,dirid){
    debugger
    var url = "${ContextPath}/generic/workplan/flush?IntervalList="+$.queryString("IntervalList")+
    "&lineId="+$.queryString("lineId")+"&categoryId="+$.queryString("categoryId")+"&peaksetionId="+peakid+"&dir="+dirid;
    var data = $.ajax({
        url : url,
        async : false,
        type : "POST",
        data : {},
        success: function(data){
            debugger
                if(data) {
                    data = eval("("+data+")");
                    initEchart(data);
                }
            }
    });
}

function createPeakSelect(peakMap){
    var selectPeak=$("#peaksetionSelect");//峰段下拉框
    peakMap.each(function(peakid){
        if(!dirRepeat("peaksetionSelect", peakid)){
            var peakOption=$("<option></option>");
            peakOption.val(peakid);
            peakOption.text(peakMap.get(peakid));
            selectPeak.append(peakOption);

        }
    });
}
function init(){
    var IntervalList = $.queryString("IntervalList");
    IntervalList=JSON.parse(IntervalList); //可以将json字符串转换成json对象 
    var selectObj = $("#dirSelect");//方向下拉框
    var selectPeak=$("#peaksetionSelect");//峰段下拉框
    for(var i =0 ;i<IntervalList.length;i++){
        var peakid = IntervalList[i].PEAK_SECTION;//峰段id
        var peakName=IntervalList[i].PEAK_SECTIONDESC;//峰段名称
        var startTime=IntervalList[i].STARTTIME;//峰段开始时间
//      alert(startTime);
         var endTime=IntervalList[i].ENDTIME;//峰段结束时间
        timeMap.put(peakid,startTime+"-"+endTime);
        var dirid=IntervalList[i].OPM_DIRECTION;//双向id
        var dirName = dirid=="0"?"上行":"下行";//方向返回0，表示是上行，否则下行
        if(dirid=="0"){
            debugger
            if(!uppeakMap.containsKey(peakid)){
                //?放峰段的起始时间吗
                uppeakMap.put(peakid,peakName);
            }
            dirMap.put(dirid,uppeakMap);
        }else{
            debugger
            if(!downpeakMap.containsKey(peakid)){
                downpeakMap.put(peakid,peakName);
            }
            dirMap.put(dirid,downpeakMap);
        }
        //去掉重复
        if(!dirRepeat("dirSelect",dirid)){
            var dirOption = $("<option></option>");
            dirOption.val(dirid);
            dirOption.text(dirName);

            selectObj.append(dirOption);
        }

        if(!dirRepeat("peaksetionSelect", peakid)){
            var peakOption=$("<option></option>");
            peakOption.val(peakid);
            peakOption.text(peakName);
            selectPeak.append(peakOption);

        }

    }
    dirMap.each(function(dir){
        dirMap.get(dir);
    });

}
//去掉重复
function dirRepeat(id,value){
    var returnValue = false;
    $("#"+id+" option").each(function(){
        if($(this).val() == value){
            returnValue = true;
        }
    });
    return returnValue;
}
function initEchart(data){
    debugger
    var stationThro = eval("("+data.throughputMap+")").stationList;
    var throughputList=eval("("+data.throughputMap+")").throughputList;
    var pastThroughputList=eval("("+data.pastCapacityMap+")").pastThroughputList;

    var stationRet=eval("("+data.retMap+")").stationList;
    var countList=eval("("+data.retMap+")").countList;
    var pastCountList=eval("("+data.pastTripsMap+")").pastCountList;

    var stationApp=eval("("+data.approvalMap+")").stationList;
    var approvalList=eval("("+data.approvalMap+")").approvalList;
    var pastApprovalList=eval("("+data.pastApprovalMap+")").pastApprovalList;

    var stationPun=eval("("+data.punctualityRateMap+")").stationList;
    var punctualityRateList=eval("("+data.punctualityRateMap+")").punctualityRateList;
    var pastPunctualityRateList=eval("("+data.pastPunctualityMap+")").pastPunctualityRateList;

    var peakid = $("#peaksetionSelect option:selected").val();
    var time = timeMap.get(peakid);
    //为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    <body>
<h3>运力、满意度分析</h3>
<div >
        <select id="dirSelect" ></select>
        <select id="peaksetionSelect"></select> 

</div>

Answer 1

太长 还不用代码编辑器