下拉列表框

繼承 $.fn.combo.defaults. 重寫 $.fn.combobox.defaults.

組合框顯示一個可編輯的文本框和下拉列表,用戶選擇一個或多個值。用戶可以直接輸入文本到頂部的列表,或選擇一個或多個當前值列表。

width="300" height="150" src="http://www.wuzhuti.cn/resources/jquery-easyui-1.3.2/demo/combobox/basic.html" frameborder="no" scrolling="no" style="width: 100%; height: 350px;">

依賴

• combo

應用實例

從<select>創建下拉列表框元素與一個預定義的結構。

[html] 預覽復制print?

<select?id="cc"?class="<a?title="EasyUI"?href="http://wuzhuti.cn/tag/easyui/">EasyUI</a>-combobox"?name="dept"?style="width:200px;">??

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

<option>bitem2</option>??

<option>bitem3</option>??

<option>ditem4</option>??

??

<option>eitem5</option>??

</select>??

??

???

<select id="cc" class="EasyUI-combobox" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option> <option>bitem3</option> <option>ditem4</option><option>eitem5</option> </select>

創建下拉列表框從<input>標記。

[html] 預覽復制print?

<input?id="cc"?class="easyui-combobox"?name="dept"?data-options="valueField:'id',textField:'text',url:'get_data.php'"?/>??

<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'" />

使用javascript創建下拉列表框。

[html] 預覽復制print?

<input?id="cc"?name="dept"?value="aa">??

??

$('#cc').combobox({??

url:'combobox_data.json',??

??

valueField:'id',??

??

textField:'text'??

});??

<input id="cc" name="dept" value="aa">$('#cc').combobox({ url:'combobox_data.json',valueField:'id',textField:'text' });

創建兩個依賴的組合框。

[html] 預覽復制print?

<input?id="cc1"?class="easyui-combobox"?data-options="?valueField:?'id',?textField:?'text',?url:?'get_data1.php',??

??

onSelect:?function(rec){??

var?url?=?'get_data2.php?id='+rec.id;??

??

$('#cc2').combobox('reload',?url);??

??

??

}"?/>??

??

<input?id="cc2"?class="easyui-combobox"?data-options="valueField:'id',textField:'text'"?/>??

<input id="cc1" class="easyui-combobox" data-options=" valueField: 'id', textField: 'text', url: 'get_data1.php',onSelect: function(rec){ var url = 'get_data2.php?id='+rec.id;$('#cc2').combobox('reload', url);}" /><input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />

json數據格式示例:

[{"id":1,"text":"text1" },{"id":2,"text":"text2" },{"id":3,"text":"text3","selected":true},{"id":4,"text":"text4" },{"id":5,"text":"text5" }]

屬性

屬性從Combo擴展,下面是添加屬性組合框。

名稱類型說明默認

valueField	string	底層數據值名稱綁定到這個組合框，傳到后臺實際值。	value
textField	string	底層數據字段名稱綁定到這個組合框，前臺顯示值。	text
mode	string	定義了如何加載列表數據當文本改變。設置為“remote“如果下拉列表框從服務器加載。當設置為“remot“模式下,用戶類型將被發送的http請求參數命名為“q”服務器來檢索新數據。	local
url	string	一個URL加載列表數據從遠程。	null
method	string	http方法檢索數據。	post
data	array	數據列表加載。代碼示例: <input class="easyui-combobox" data-options="valueField: 'label',textField: 'value', data: [{label: 'java',value: 'Java'}, {label: 'perl',value: 'Perl'}, {label: 'ruby', value: 'Ruby'}]" />	null
filter	function	定義了如何過濾本地數據當“model”設置為“local”。這個函數接受兩個參數: q: 用戶輸入的文本。 row: 行數據的列表。 返回true允許這行被顯示。代碼示例: $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } });	?
formatter	function	定義如何渲染row。這個函數接受一個參數row.代碼示例: $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } });	?
loader	function(param,success,error)	定義了如何加載數據從遠程服務器。可以放棄這次行動返回false。這個函數接受以下參數: param: 參數對象傳遞給遠程服務器。 success(data): 這個回調函數會調用這些當檢索數據成功。 error(): 這個回調函數會調用這些當未能檢索數據。	json loader

?

事件

事件從Combo擴展,下面是添加事件為下拉列表框。

名稱參數說明

onBeforeLoad	param	在加載數據前觸發事件，如果返回false則不會加載數據代碼示例: // 改變參數的http請求從服務器加載數據之前 $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } });
onLoadSuccess	none	當遠程數據加載成功。
onLoadError	none	當遠程數據加載錯誤。
onSelect	record	當用戶選擇一個列表項。
onUnselect	record	當用戶取消選擇列表項。

?

方法

從Combo的方法擴展,下面是添加或重寫的方法為下拉列表框。

名稱參數說明

options	none	返回選擇對象。
getData	none	返回數據的加載。
loadData	data	加載區域列表數據。
reload	url	請求遠程列表數據。通過“url”參數覆蓋原始url值。代碼示例: $('#cc').combobox('reload'); // 重新加載列表數據使用舊的URL $('#cc').combobox('reload','get_data.php'); // 重新加載列表數據使用新的URL
setValues	values	設置組合框值數組。代碼示例: $('#cc').combobox('setValues', ['001','002']);
setValue	value	設置下拉列表框的值。代碼示例: $('#cc').combobox('setValue', '001');
clear	none	清除下拉列表框值。
select	value	選擇指定的項。
unselect	value	取消選擇指定的項。

總結

以上是生活随笔為你收集整理的JQuery EasyUI combobox(下拉列表框)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。