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

html-css015

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

}

宽度调整

可以在style中直接设置：

<input class="mini-textbox" style="width:200px"/>

高度调整

如果需要调整按钮、输入框、下拉框、日期框等控件的高度，需要通过CSS样式，如下代码：

/* button */

.mini-button-text

{

padding-top:1px

padding-bottom:2px

padding-top:3px\9

padding-bottom:1px\9

}

/* textbox */

.mini-textbox

{

height:19px

}

.mini-textbox-input

{

height:17px

line-height:15px

}

/* buttonedit */

.mini-buttonedit

{

height:19px

}

.mini-buttonedit-border

{

height:17px

}

.mini-buttonedit-input

{

height:17px

line-height:15px

}

.mini-buttonedit-button

{

height:13px

}

.mini-buttonedit-icon

{

width:15px

height:14px

}

.mini-datepicker .mini-buttonedit-icon

{

background-position:50% 1px

}

1、在HBuilder软件中创建web项目，并在web项目指定的目录下创建静态页面select.html。

2、引入EasyUI插件核心css和js文件，并引入jQuery核心js文件。

3、下面开始编写ComboBox容器，该控件利用的是select标签元素构成的，设置ComboBox样式，如下图所示。

4、编辑js代码，获取ComboBox选中的值和文本，利用getValue和getText方法分别获取值和文本。