ComboBox Document

扩展自$.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">  
<script type="text/javascript">
$('#cc').combobox({    
    url:'combobox_data.json',    
    valueField:'id',    
    textField:'text'   
});  
</script>
				
			

创建2个有依赖关系的下拉列表框。

				
<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(自定义下拉框)，下拉列表框新增的属性如下：

				
<script type="text/javascript">
$('#cc').combobox({
  groupFormatter: function(group){
    return '<span style="color:red">' + group + '</span>';
  }
});
</script>
				
			

				
<input class="easyui-combobox" data-options="
    valueField: 'label',
    textField: 'value',
    data: [{
      label: 'java',
      value: 'Java'
    },{
      label: 'perl',
      value: 'Perl'
    },{
      label: 'ruby',
      value: 'Ruby'
    }]" />
				
			

				
<script type="text/javascript">
$('#cc').combobox({
  url : "127.0.0.1/xxx",
  queryParams: {
    "age" : 25,
    "order" : "desc"
  }
});
</script>
				
			

				
<script type="text/javascript">
$('#cc').combobox({
  filter: function(q, row){
    var opts = $(this).combobox('options');
    return row[opts.textField].indexOf(q) == 0;
  }
});
</script>
				
			

				
<script type="text/javascript">
$('#cc').combobox({
  formatter: function(row){
    var opts = $(this).combobox('options');
    return row[opts.textField];
  }
});
</script>
				
			

事件：

下拉列表框事件继承自combo(自定义下拉框)，下拉列表框新增的事件如下：

				
<script type="text/javascript">
// 在加载服务器数据之前改变http请求参数的值
$('#cc').combobox({
  onBeforeLoad: function(param){
    param.id = 2;
    param.language = 'js';
  }
});
</script>
				
			

方法：

下拉列表框扩展自combo(自定义下拉框)，下拉列表框新增或重写的方法如下：

				
<script type="text/javascript">
$('#cc').combobox('reload');      // 使用旧的URL重新载入列表数据
$('#cc').combobox('reload','get_data.php');  // 使用新的URL重新载入列表数据
</script>
				
			

				
<script type="text/javascript">
$('#cc').combobox('setValues', ['001','002']);
</script>
				
			

				
<script type="text/javascript">
$('#cc').combobox('setValue', '001');
</script>