jquery easyui中的combobox下拉列表显示的数据太多,怎么能出现下拉滚动条?

html-css022

jquery easyui中的combobox下拉列表显示的数据太多,怎么能出现下拉滚动条?,第1张

默认是限制高度的,没有出现下拉条可能是其他的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="选择的值为"/>