JQuery EasyUI combobox(下拉列表框)



下拉列表框

继承 $.fn.combo.defaults. 重写 $.fn.combobox.defaults.

组合框显示一个可编辑的文本框和下拉列表,用户选择一个或多个值。用户可以直接输入文本到顶部的列表,或选择一个或多个当前值列表。

依赖

• combo

应用实例

从<select>创建下拉列表框元素与一个预定义的结构。

[html] 预览复制print?

1. <select id="cc" class="<a title="EasyUI" href="http://wuzhuti.cn/tag/easyui/">EasyUI</a>-combobox" name="dept" style="width:200px;">  
2. <option value="aa">aitem1</option>  
3. <option>bitem2</option>  
4. <option>bitem3</option>  
5. <option>ditem4</option>  
6.   
7. <option>eitem5</option>  
8. </select>  
9.   
10.    

<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?

1. <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?

1. <input id="cc" name="dept" value="aa">  
2.   
3. $('#cc').combobox({  
4. url:'combobox_data.json',  
5.   
6. valueField:'id',  
7.   
8. textField:'text'  
9. });  

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

$('#cc').combobox({
url:'combobox_data.json',

valueField:'id',

textField:'text'
});

创建两个依赖的组合框。

[html] 预览复制print?

1. <input id="cc1" class="easyui-combobox" data-options=" valueField: 'id', textField: 'text', url: 'get_data1.php',  
2.   
3. onSelect: function(rec){  
4. var url = 'get_data2.php?id='+rec.id;  
5.   
6. $('#cc2').combobox('reload', url);  
7.   
8.   
9. }" />  
10.   
11. <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扩展,下面是添加属性组合框。

事件

事件从Combo扩展,下面是添加事件为下拉列表框。

方法

从Combo的方法扩展,下面是添加或重写的方法为下拉列表框。