JQuery EasyUI combobox(下拉列表框)

下拉列表框

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

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

依赖

• combo

应用实例

从<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>标记。

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

使用javascript创建下拉列表框。

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

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

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的方法扩展,下面是添加或重写的方法为下拉列表框。