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" target="_blank" rel="external nofollow" />

<link href="../css/jqueryui/jquery-ui.min.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />

<link href="../css/jqueryui/jquery-ui.theme.min.css" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow"  />
<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(),//序列化表單