# 加載方式 ## JS調用加載 > 自定義下拉框不能通過標簽的方式進行創建。 ``` <input id="box" /> <script> $(function () { //JS 加載調用 $('#box').combo({ required : true, multiple : true, }); }); </script> ``` # 屬性列表 | 屬性名 | 值 | 說明 | | --- | --- | | width | number| 組件的寬度。默認值 auto。| | height | number | 組件的高度。默認值22。| | panelWidth | number| 下拉面板寬度。默認值 null。| | panelHeight | number | 下拉面板高度。默認值200。| | multiple | boolean | 定義是否支持多選。默認值 false。| | selectOnNavigation | boolean| 定義是否允許使用鍵盤導航來選擇項目。默認值 true。| | separator | string | 在多選的時候使用何種分隔符進行分割。默認值’,’。| | editable | boolean | 定義用戶是否可以直接輸入文本到字段中。默認值 true。| | disabled | boolean | 設置啟用/禁用字段。默認值 false。| | readonly | boolean | 設置該字段為讀寫/只讀模式。默認值false。| | hasDownArrow | boolean | 定義是否顯示向下箭頭按鈕。默認值true。| | value| string | 字段的默認值。| | delay | number | 最后一次輸入事件與執行搜索之間的延遲間隔（執行自動完成功能的延遲間隔）默認值200。| | keyHandler | object | 在用戶按下鍵的時候調用一個函數。| *** ``` <script> $('#box').combo({ width : 300, height : 50, panelWidth : 300, panelHeight : 200, disabled : false, hasDownArrow : false, delay : 50, editable : true, readonly : false, required : true, multiple : true, }); </script> ``` # 事件列表 | 事件名 | 事件屬性 | 說明 | | --- | --- | | onShowPanel | none | 當下拉面板顯示的時候觸發。 | | onHidePanel | none | 當下拉面板隱藏的時候觸發。 | | onChange | newValue, oldValue | 當字段值改變的時候觸發。| *** ``` <script> $('#box').combo({ required : true, multiple : true, onShowPanel : function () { alert('下拉的時候觸發！'); }, onHidePanel : function () { alert('下拉面板隱藏的時候觸發！'); }, onChange : function () { alert('字段值改變的時候觸發！'); }, }); </script> ``` # 方法列表 | 方法名 | 傳參 | 說明 | | --- | --- | | options | none | 返回屬性對象。| | panel | none | 返回下拉面板對象。| | textbox | none | 返回文本框對象。| | destroy | none | 銷毀該組件。| | resize | width | 調整組件寬度。| | showPanel | none | 顯示下拉面板。| | hidePanel | none | 隱藏下拉面板。| | disable | none| 禁用組件。| | enable | none| 啟用組件。| | readonly | mode | 啟用/禁用只讀模式。| | validate | none | 驗證輸入的值。| | isValid | none | 返回驗證結果。| | clear | none | 清除控件的值。| | reset vnone | 重置控件的值。| | getText | none 獲取輸入的文本。| | setText | text | 設置輸入的文本。| | getValues | none | 獲取組件值的數組。| | setValues | values | 設置組件值的數組。| | getValue | none | 獲取組件的值。| | setValue | value | 設置組件的值。| *** ``` //返回屬性對象 console.log($('#box').combo('options')); //返回下拉面板對象 console.log($('#box').combo('panel')); //返回文本框對象 console.log($('#box').combo('textbox')); //銷毀組件 $('#box').combo('destroy'); //禁用和啟用 $('#box').combo('disable'); $('#box').combo('enable'); //調整到默認寬度 $(document).click(function () { $('#box').combo('resize', 'width'); }); //顯示下拉面板 $(document).click(function () { $('#box').combo('showPanel'); }); //隱藏下拉面板 $('#box').combo('hidePanel'); //啟用禁用，true 可不填，false 則為不啟用 $('#box').combo('readonly',true); //驗證文本框內的值是否合法 $(document).click(function () { console.log($('#box').combo('isValid')); }); //清空文本框內容 $(document).dblclick(function () { $('#box').combo('clear'); }); //重置文本框到初始狀態 $(document).dblclick(function () { $('#box').combo('reset'); }); //得到文本框字符串 $(document).click(function () { console.log($('#box').combo('getText')); }); //設置文本框字符串 $(document).click(function () { console.log($('#box').combo('getText')); }); //獲取組件的 Value 值 $(document).click(function () { console.log($('#box').combo('getValue')); console.log($('#box').combo('getValues')); }); //可以使用$.fn.combo.defaults 重寫默認值對象。 ```