1. 展现方式
select:
<select id="s1" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s1" '>
<option value="TN">Tennessee</option>
<option value="VA" selected="selected">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
comboBox:
<select id="setvaluetest" data-dojo-type="<strong>dijit/form/ComboBox</strong>"
data-dojo-props='name:"state1",
style:{width:"50%", fontSize:"200%", fontFamily:"Courier"},
autoComplete:false,
selectOnClick:true,
onBlur:function(){ dojo.byId("b1").value=dijit.byId("setvaluetest").value },
onClick:function(){ console.log("onclick"); },
pageSize:30,
labelFunc:setValueTestLabelFunc,
onChange:setValueTestOnChange
'>
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
FilteringSelect:
<select id="setvaluetest" data-dojo-type="<strong>dijit/form/FilteringSelect</strong>"
data-dojo-props='name:"state1",
style:{width:"50%", fontSize:"200%", fontFamily:"Courier"},
autoComplete:false,
selectOnClick:true,
onBlur:function(){ dojo.byId("b1").value=dijit.byId("setvaluetest").value },
onClick:function(){ console.log("onclick"); },
pageSize:30,
labelFunc:setValueTestLabelFunc,
onChange:setValueTestOnChange
'>
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
2、功能
select:
(1)设置字体及字体颜色
(2)设置选项图标
(3)设置分组
(4)设置下拉框高度
Combobox 和 FilteringSelect:
相同功能点:
(1)自动补全:输入字母会出现提示,会自动选中搜索结果第一个匹配项。
<select data-dojo-type="dijit/form/ComboBox" data-dojo-props='store:stateStore,searchAttr:"name",name:"state2"'></select>
若不需要自动匹配搜索结果第一项,则设置:autoComplete:false。效果如下:
若不需要对搜索内容进行高亮,则设置:highlightMatch:false。效果如下:
(2)通过修改style属性可以定义选项框的宽度和字体大小等属性,这里的fontSize支持百分比。
(3)去掉输入框右侧的下拉箭头,根据输入的内容进行匹配显示。则设置:hasDownArrow:false。效果如下:
(4)控件初始化时,可以设置对数据筛选和过滤。
(5)数据分页显示
(6)设置选项展现的样式
例如:把显示项都转为小写展示
JS:
function myLabelFunc(item, store) {
var label = store.getValue(item, 'name');
// DEMO: uncomment to chop off a character
//label=label.substr(0, label.length-1);
// DEMO: uncomment to set to lower case
label = label.toLowerCase();
return label;
}
HTML:
(7)Combobox占位提示
(8)搜索匹配项区分大小写
例如:设置一个下拉框有4个选项
输入“a”后,匹配的选择项为4个:
设置组件ignoreCase属性为false后,输入“a”后,匹配的选择项只有2个:
不同点:
(1)通过get("value") 获取控件值,ComboBox 获取到的值是:控件显示值,FilteringSelect 获取到的值是:id 字段的值 /option标签中value属性的值
(2)如果文本框中输入的值,在下拉列表中没有对应的匹配项。FilteringSelect 会输入的数据进行校验,则会给出错误提醒。ComboBox 不会对输入的数据进行校验。