默认是限制高度的,没有出现下拉条可能是其他的css影响了或者是combobox使用方式不对。
解决办法
1.检查自己的使用方式
官方的使用方式:
<select class="easyui-combobox" name="state" style="width:200px"><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH" selected>Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
2.修改css样式
.combo-panel {height:200px
overflow: auto
}
代码,如下:step1:将一下代码放到<head></head>标签中
[html] view plain copy
<!-- 下面的四行是:加载combobox的相关文件,这个是官方文件-->
<link href="/css/easyui.css" rel="stylesheet"></link>
<link href="/css/icon.css" rel="stylesheet"></link>
<link href="/css/main.css" rel="stylesheet"></link>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.easyui.min.js"></script>
<script src="/js/easyui-lang-zh_CN.js" charset="utf-8"></script>
<!--加载echarts图的先关文件,这个是官方文件,必须加载的 -->
<script src="/js/echarts.min.js"></script>
<!-- 加载自己画好的echarts图的文件 -->
<script src="/js/drawChartsThird.js"></script>
step2:将下面的JavaScript也放到<head></head>标签中;
[javascript] view plain copy
<script>
$(function(){
load()//打开之后默认展示的图片
//根据选择加载相关的图片,这里用到onChange方法
$("#mySelect").combobox({
onChange:load
})
})
function load(){
//此处用“getValue”获得选择的值
var type = $("#mySelect").combobox("getValue")
if(type=="day"){
$(".self-box").attr("id","self-box-day")/*给div添加一个id */
mTimesDay("self-box-day")/*将id值传给mTimesDay方法,显示此方法定义的图片 */
}else if(type=="week"){
$(".self-box").attr("id","self-box-week")
mTimesWeekend("self-box-week")
}else{
$(".self-box").attr("id","self-box-months")
mTimesMonths("self-box-months")
}
}
</script>
step3:页面布局,放在body标签之间;
[html] view plain copy
<table border="1">
<tr>
<td>
<select class="easyui-combobox" id="mySelect" >
<option value="day">按天选择</option>
<option value="week">按周选择</option>
<option value="months">按月选择</option>
</select>
</td>
</tr>
</table>
<!--在此div里加载图片 ,注意:加载echarts图片时,必须对div设置高和宽,否则图片不显示 -->
<div class="self-box" style="width: 1500pxheight: 500px">
step4:建立一个drawChartsThird.js文件,在此文件中写入画的echarts图的代码,此处只以天为例,周和月做出一下注释中相应的改变即可;
[javascript] view plain copy
var mTimesDayBar //周该为 var <span style="font-family: Arial, Helvetica, sans-serif">mTimesWeekendBar;月改为 var </span><span style="font-family: Arial, Helvetica, sans-serif">mTimesMonthsBar</span><span style="font-family: Arial, Helvetica, sans-serif">
</span>//多发时间段柱状图Day
function mTimesDay(id){ <span style="font-family: Arial, Helvetica, sans-serif">//周该为 function </span><span style="font-family: Arial, Helvetica, sans-serif">mTimesWeekend;月改为 function </span><span style="font-family: Arial, Helvetica, sans-serif">mTimesMonths</span>
[javascript] view plain copy
<span style="white-space:pre"> </span>//将下面的全部的<span style="font-family: Arial, Helvetica, sans-serif">mTimesDayBar改为:周的是</span><span style="font-family: Arial, Helvetica, sans-serif">mTimesWeekendBar;月的是</span><span style="font-family: Arial, Helvetica, sans-serif">mTimesMonthsBar;对数据data做出相应的改变即可</span>
[javascript] view plain copy
<span style="font-family: Arial, Helvetica, sans-serif">
</span>mTimesDayBar = echarts.init(document.getElementById(id))
var option = {
title: {
text: '当前辖区事件发现数'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['线索', '网格员上报','即发即处事件']
},
grid : {
top:'20%',
left : '3%',
right : '30%',
bottom : '1%',
containLabel : true
},
xAxis: {
type: 'category',
axisLabel: {
show: true,
interval: 0,
},
data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00']
},
yAxis: {
type: 'value'
},
series: [
{
name: '线索',
type: 'bar',
data: [1823, 2389, 2034, 10970, 11744, 60230,2904, 2034, 10970]
},
{
name: '网格员上报',
type: 'bar',
data: [1925, 2338, 3100, 11594, 13441, 68807,11594, 2338, 3100]
},
{
name: '即发即处事件',
type: 'bar',
data: [1935, 2338, 3000, 11594, 14141, 61807,61807, 2338, 3000]
}
]
}
mTimesDayBar.setOption(option)
window.onresize =mTimesDayBar.resize
}
完成以上步骤就可以了。
我的JSP页面代码(节选)<script src="${ctx}/js/jquery.js" type="text/javascript"></script><script src="${ctx}/js/jquery.easyui.min.js" type="text/javascript"></script><script src="${ctx}/js/calendar.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="${ctx}/css/default/easyui.css"><link rel="stylesheet" type="text/css" href="${ctx}/css/icon.css">function driverOnChanage(){ alert("触发了事件")} <select name="odriver" id="odriver" style="width:120px" class="easyui-combobox" onchange="driverOnChanage()"><s:iterator value="dList" var="driver"><option value="${driver.id}">${driver.driverName}</option></s:iterator></select>这个是文档上的一些内容EventsName Parameters Description
onChange newValue, oldValue Fires when the field value is changed.
$('#odriver').bind('onChange',function(n,o){alert(n)})测试了一下,还是没用,我把代码贴给你看一下:
<html><head><meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>$().ready(function(){ $('#cc').change(function(n,o){ alert("改变值!")//不能触发 })$('#chooseValue').click(function(){ alert("选择的值为" + jQuery("#cc option:selected").val())})})</script></head><body><h1>ComboBox</h1><span>Options: </span><select id="cc" class="easyui-combobox" name="dept" style="width:150px"><option value="aa">中华人民共和国</option><option value="cerc">中文a</option><option value="crwerc">江西师范大学</option><option value="crwerc">江西省fdsf</option><option value="cewrwerc">江西省fsad</option><option value="cfdsc">江西省sfsadf</option><option value="ds">江西省asf</option></select><input id="chooseValue" type="button" value="选择的值为" onClick="selectValue()"/></body></html>下面的选择值按钮事件能触发,值也能获取到. 问题补充:不好意思,上面代码贴错了,]<input id="chooseValue" type="button" value="选择的值为" onClick="selectValue()"/>,应该是
<input id="chooseValue" type="button" value="选择的值为"/>