jquery multiselect下拉复选框应用

1.引入CSS、JS文件:jquery ui theme主题CSS、multiselect CSS、jquery库、multiselct JS

<link rel="stylesheet" type="text/css" href="../css/jqueryui/jquery.multiselect.css" />

<link href="../css/jqueryui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="../css/jqueryui/jquery-ui.theme.min.css" rel="stylesheet" type="text/css" />
<script type="../js/jquery/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="../css/jqueryui/jquery-ui.min.js"></script>

<script type="text/javascript" src="../css/jqueryui/jquery.multiselect.js"></script>

2.HTML代码

<select multiple="multiple" id="selectId" name="coltd">

<option value="aa">选项1<option>//可通过ajax动态生成option
</select>

3.js代码：

$("#selectId").multiselect({//可添加其他初始化参数
minWidth:155//宽度
});

设置高度：

覆盖样式或修改JS文件

<style type="text/css">
.ui-multiselect { padding:2px 0 2px 4px; text-align:left;height:31px }

</style>

showbo提供的答案：

这个插件没有定义控件的高度的配置，控件也没有设置高度，依据内容的高度来确定控件整体高度，你可以给样式添加高度即可。不过还是修改源代码来实现高度控制好点，可以随便配置，而不用统一

2者结合也可以

css覆盖部分，你也可以修改jquery.multiselect.css这个css文件增加style里面的样式

 <link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<style>
.ui-multiselect{line-height:30px;height:30px}
</style>

或者修改jquery.multiselect.js文件，增加一个cHeight配置，用来控制控件的高度，找到下面的这句，修改成这样

 var button = (this.button = $('<button type="button"><span class="ui-icon ui-icon-triangle-1-s"></span></button>'))

===>改成这样，判断配置了cHeight增加增加style控制高度

  var button = (this.button = $('<button type="button"'+(o.cHeight?' style="height:'+o.cHeight+'px"':'')+'><span class="ui-icon ui-icon-triangle-1-s"></span></button>'))

DEMO

  $("select").multiselect({cHeight:40}); 

//添加值、启用、禁用、刷新

$.ajax({
url:"<%=request.getContextPath()%>/getjson.do",
type:"post",
cache:false,
async: false,
dataType:"html",
success:function(json){
var json_f=eval("("+json+")");
optionStr=json_f.optionStr;
}
});

$("#selectId").empty();

 $("#selectId").append(optionStr);

 $("#selectId").multiselect("refresh",true);

$("#selectId").multiselect("enable");

$("#selectId").multiselect("disable");

 checkAllText: '全选',
      uncheckAllText: '全不选',
      noneSelectedText: '请选择',
      selectedText: '# 项被选中',

//取值

var selectValueStr=[];

$("#selectId option:selected").each(function(){
selectValueStr.push($(this).val());
});
$("#selectValueStrId").val(selectValueStr.join(","));//设置值隐藏域

data:$("#myFormId").serialize(),//序列化表单