EasyUI ComboBox应用示例

直接进入主题，假如使用如下的标签来创建ComboBox:

<input id="cmbx_interval" name="cmbx_interval" >

对于JS代码主要考虑如下的情景
1，创建ComboBox的时候已经具备数据源（intervalDatas）,其定义如下：

var intervalDatas= [{text:'年',value:'year'},{text:'月',value:'month'},{text:'日',value:'day'}] ;

接着就开始初始化组件并赋予下拉列表的值：

$('#cmbx_interval').combobox({ valueField:'value', //对应数据中的某个属性 textField:'text', //对应数据中的某个属性 width:120, data:intervalDatas, /* 选择事件，data是被选中的一个对象，例如：{text:'年',value:'year'} */ onSelect:function(data){ } });

如此一来ComboBox就创建好了。但是当前并没有默认的选择项，如果做看后面。

2，创建ComboBox的时候不具备数据源，等待后面再赋值
如果我们初始化了ComboBox,如下：

$('#cmbx_interval').combobox({ valueField:'value', //对应数据中的某个属性 textField:'text', //对应数据中的某个属性 });

同时我们从服务器获得了数据源intervalDatas，接下来便加载数据源：

$('#cmbx_interval').combobox('loadData',intervalDatas) ;

这里的loadData其实就是它提供的方法，intervalDatas就是给这个方法传递的参数。

3，ComboBox的数据源有了，如何让他默认的选择某项呢，使用如下方法

$('#cmbx_interval').combobox('setValue',intervalDatas[0].value) ;

注意这里标红的“value”,他是对象里面的一个属性，同时要和初始化ComboBox时候指定的valueField一致

4，初始化过后如何直接获取ComboBox选中的项

var value = $('#cmbx_interval').combobox('getValue') ; //返回valueField指定的属性值

var text = $('#cmbx_interval').combobox('getText')； //返回textField指定的属性值

还有一种方法，只需稍微修改下数据源就可以：

var intervalData = [{text:'年',value:'year'},{text:'月',value:'month'}, {text:'日',value:'day','selected':true}] ;

只需在对象上添加selected属性并设置为true，那么初始化后便会默认选择该项。

本文出自 “因简单而自在” 博客，请务必保留此出处http://dengshuangfu.blog.51cto.com/8794650/1709128