问题描述
- 选择第一个下拉框，第二个跟着刷新数据，实现联动刷新
-
<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(peakiddirid); }); //切换峰段下拉框 $(""#peaksetionSelect"").change(function(){ var peakid = $(this).val(); var dirid = $(""#dirSelect option:selected"").val(); getData(peakiddirid); });});function getData(peakiddirid){ 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(peakidstartTime+""-""+endTime); var dirid=IntervalList[i].OPM_DIRECTION;//双向id var dirName = dirid==""0""?""上行"":""下行"";//方向返回0，表示是上行，否则下行 if(dirid==""0""){ debugger if(!uppeakMap.containsKey(peakid)){ //?放峰段的起始时间吗 uppeakMap.put(peakidpeakName); } dirMap.put(diriduppeakMap); }else{ debugger if(!downpeakMap.containsKey(peakid)){ downpeakMap.put(peakidpeakName); } dirMap.put(diriddownpeakMap); } //去掉重复 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(idvalue){ 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>
解决方案
你要做的就是一个二级联动，，直接给在第一个下拉框中change事件改变第二个下拉框的值就行了
解决方案二：
顶一个，二楼说的对，select绑定change事件，根据选中的值，去查第二个下拉框的数据，用ajax吧，很好玩的
解决方案三： <!-- /* * 说明：将指定下拉列表的选项值清空 * 作者：CodeBit.cn ( http://www.CodeBit.cn ) * * @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须 */function removeOptions(selectObj){ if (typeof selectObj != 'object') { selectObj = document.getElementById(selectObj); } // 原有选项计数 var len = selectObj.options.length; for (var i=0; i < len; i++) { // 移除当前选项 selectObj.options[0] = null; }} /* * 说明：设置传入的选项值到指定的下拉列表中 * 作者：CodeBit.cn ( http://www.CodeBit.cn ) * * @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须 * @param {Array} optionList 选项值设置 格式：[{txt:'北京' val:'010'} {txt:'上海' val:'020'}] ，必须 * @param {String} firstOption 第一个选项值，如：“请选择”，可选，值为空 * @param {String} selected 默认选中值，可选 */function setSelectOption(selectObj optionList firstOption selected){ if (typeof selectObj != 'object') { selectObj = document.getElementById(selectObj); } // 清空选项 removeOptions(selectObj); // 选项计数 var start = 0; // 如果需要添加第一个选项 if (firstOption) { selectObj.options[0] = new Option(firstOption ''); // 选项计数从 1 开始 start ++; } var len = optionList.length; for (var i=0; i < len; i++) { // 设置 option selectObj.options[start] = new Option(optionList[i].txt optionList[i].val); // 选中项 if(selected == optionList[i].val) { selectObj.options[start].selected = true; } // 计数加 1 start ++; } } //--> 解决方案四：
生成json数据导入页面，然后就是联动的问题了，demo：javascript省市联动示例
解决方案五：
无刷新下拉框
解决方案六：
太长 还不用代码编辑器
解决方案七：
太长，懒得看，说下思路吧。方法一：把两个下拉框的内容都查出来，放到浏览器缓存，点击第二个下拉框时根据第一个下拉框的内容进行过滤，下拉列表中就是你要的了。方法二：点击第二个下拉框时，把第一个下拉框的值当做参数去请求服务器，获得下拉值。方法三：跟方法二差不多，不过是在第一个选择值之后去更新第二个下拉框下拉列表内容
解决方案八：
把数据查出来放到list集合中，通过第一个下拉框的onchange=""XXX""事件。根据第一张表所选中的字段ID，来联动第个下拉列表的内容