解决Select下拉列表的高度_select 下拉框占用高度-CSDN博客

本文介绍如何使用Combobox组件改进Select下拉列表的显示效果，包括引入必要的JS和CSS文件、编写JSP页面代码、初始化组件及复写样式等步骤。

Select 下拉列表的内容如果有很多的话，内容框的高度就会很高，导致不好看的。作者百度了查看了很多资料，也试过。可以通过css和js来进行高度的控制，但是不太好看。后来发现了通过combobox这个组件就可以解决这个问题了。

一:引入js，css文件

引入jquery.easyui.min.js,combobox-ext.css 这两个文件。

二:在jsp页面编写以下代码

三:在js文件里初始化组件

 $("#caseGroupSelect").combobox({  
                    valueField : 'id',  
                    textField : 'name',  
                    editable : true,  
                    required : true,  
                    mode : 'local',  
                    data: rData,
                    onSelect:function(record){
                        $("#caseGroupSelect").val(record.id);
                        //alert($("#caseGroupSelect").val())
                      }
                               });

data:这是一个对象集合。

四:复写样式

为什么要复写样式呢？因为每个系统都有自己的样式，默认的样式可能和你的系统不符合，通过复写样式，写成符合你系统的风格的样式?

/* combobox的样式 */
.combo-arrow{
    background: url(../../images/workbench/caseResource/combo_arrow_new.png) no-repeat center center;

}
.combo-arrow{
  background-color: #eee;
}
.combo-arrow:hover {
    background-color: #e0e0e0;
}
.textbox{
  border: 1px solid #ccc;
}
.panel-header, .panel-body{
  border: 1px solid #ccc;
}

五:效果