直接进入主题,假如使用如下的标签来创建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({ /* 选择事件,data是被选中的一个对象,例如:{text:'年',value:'year'} */ |
如此一来ComboBox就创建好了。但是当前并没有默认的选择项,如果做看后面。
2,创建ComboBox的时候不具备数据源,等待后面再赋值
如果我们初始化了ComboBox,如下:
$('#cmbx_interval').combobox({ |
同时我们从服务器获得了数据源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,那么初始化后便会默认选择该项。
转载于:https://blog.51cto.com/dengshuangfu/1709128