下拉列表框

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

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

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

應(yīng)用實例

從<select>創(chuàng)建下拉列表框元素與一個預(yù)定義的結(jié)構(gòu)。

[html] 預(yù)覽復(fù)制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>

創(chuàng)建下拉列表框從<input>標(biāo)記。

[html] 預(yù)覽復(fù)制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創(chuàng)建下拉列表框。

[html] 預(yù)覽復(fù)制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' });

創(chuàng)建兩個依賴的組合框。

[html] 預(yù)覽復(fù)制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數(shù)據(jù)格式示例:

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

屬性

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

名稱類型說明默認(rèn)

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

?

事件

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

名稱參數(shù)說明

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

?

方法

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

名稱參數(shù)說明

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。