jQuery MultiSelect 下拉框高度自定義完全指南（含源碼修改方案）

問題背景

使用 jquery.multiselect 插件時，發現 height 選項僅控制下拉列表面板高度，無法設置控件本身（按鈕部分）的高度。項目環境：jQuery + jQuery UI + jquery.multiselect，瀏覽器 IE8。

源碼分析

插件默認選項中無控件高度配置：

options: {
  header: true,
  height: 175,        // 下拉面板高度
  minWidth: 225,
  // ... 無 buttonHeight 等屬性
}

控件渲染為 <button> 元素，高度由內容撐開，無固定樣式。

三種解決方案

方案一：CSS 覆蓋（最簡單）

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

針對生成的按鈕類名 .ui-multiselect 強制設置高度與行高。

方案二：修改源碼增加配置（最靈活）

編輯 jquery.multiselect.js：

1. 在 options 中添加 cHeight: null 配置項。
2. 尋找按鈕創建代碼：

var button = (this.button = $(''))

修改為：

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>'))

調用時：

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

方案三：雙管齊下

CSS 統一基礎樣式，JS 配置個性化高度，兼顧維護性與靈活性。

效果演示

建議優先方案二，一勞永逸，避免 CSS 優先級鬥爭。