天天看點

jQuery EasyUI 組合框(ComboBox)

HTML代碼:首先要定義個select

<select id="cc" name="dept"  style="width:200px;">

    <option value="aa">aitem1</option>

    <option>bitem2</option>

    <option>bitem3</option>

    <option>ditem4</option>

    <option>eitem5</option>

</select>

$('#cc').combobox(options);

options是組合框的一些選項,比如我們可以利用遠端的資料來生成一個提示框

$('#cc').combobox({

    url:'combobox_data.json',

    valueField:'id',

    textField:'text'

});

下面我們來詳細介紹一下選項的設定:

屬性

width

數字

元件的寬度

auto

listWidth

下拉清單的寬度

null

listHeight

下拉清單的高度

valueField

字元串

基礎資料值名稱綁定到這個組合框

value

textField

基礎資料的字段的名稱綁定到這個組合框

text

editable

布爾

定義是否可以直接到文本域中鍵入文本

true

url

加載清單資料的遠端URL

事件

onLoadSuccess

none

當遠端資料成功加載時觸發

onLoadError

當遠端資料加載失敗時觸發

onSelect

record

當使用者選擇了一個清單項時觸發

onChange

newValue, oldValue

當文本域字段的值改變時觸發

方法

select

選擇下拉清單中的一項

setValue

param

設定指定值到文本域,參數可以是一個字元串,也可以是一個Javascript對象,如果是對象,必須包含兩個屬性各對應valueField和TextField屬性。

getValue

擷取字段值

reload

請求遠端清單資料.

<a href="http://www.ityizhan.com/demo/jquery-easyui/html/combobox.php" target="_blank">示範</a>

<a href="http://jaychang.iteye.com/blog/850257">http://jaychang.iteye.com/blog/850257</a>

繼續閱讀