一、easyUI中select下拉框动态添加option选项
问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功。因为jquery easyui的下拉列表combobox是用DIV模拟的(其实看看它的样式就应该想到)
解决方法:
1、一个空下拉框,注意不能加class=”easyui-combobox”,否则不生效
//注意class不能加easyui-combobox
2、为下拉框添加子项:利用文档碎片
var fragment =document.createDocumentFragment();for(var i=1;i<25;i++){var option = document.createElement(“option”);
option.innerHTML= i + “点”;
$(option).attr(“value”,i);
fragment.appendChild(option);
}
$(“#selectInfo1”).append(fragment);
$(“#selectInfo1”).combobox({});
3、将下拉框转化为easyUI中的combobox
$(“#selectInfo1”).combobox({});
只要填充好数据,再去转化那就可以了。
二、Combobox用法和方法参数:
1、 需要引入class=” easyui-combobox”
2、 参数设置需要在data-options中设置
3、 属性参数配置:
valueField:基础数据值名称绑定到Combobox(提交值)
textField:基础数据的字段名称绑定的Combobox(显示值)
mode:定义当文本改变时如何加载列表数据,当设置为remote模式下,什么类型的用户将被发送http请求参数名为’q’的服务器,以获取新的数据。
url:从远程URL来加载列表数据
method:http方法检索列表数据
data:列表中被加载的数据
filter:定义如何过滤本地数据“模式”设置为’local’
formatter:定义如何呈现行
loader:定义如何从远程服务器加载数据
常用属性:
“>
*
//style:设置宽度样式之类//panelWidth:设置下拉面板宽度//panelHeight:设置下拉面板高度
4、 事件:
onBeforeLoad(param): 操作之前将数据加载,返回false就取消这个荷载作用
onLoadSuccess():触发时,远程数据加载成功
onLoadError:触发时,远程数据加载错误
ONSELECT:触发,当用户选择一个列表项
onUnselect:触发,当用户取消选择一个列表
5、方法:
options():返回选择对象
getData():返回加载的数据
loadData(data):加载列表数据
reload(url):重新加载远程数据列表
setValues(values):设置combobox的值数组
setValue(value):设置combobox的值
clear():清空combobox的值
select(value):选中指定的值
unselect(value):取消指定的值
代码实例
combobox
//动态加载数据集文件数据
function loadData(){
$(‘#cc’).combobox({
url:’combobox_data.json’,
valueField:’id’,
textField:’text’});
}//设置下拉框的值
function setValue(){
$(“#cc”).combobox(“setValue”,”动态添加的列表值”);
}//获取当前选择的值
function getValue(){var selectText=$(“#cc”).combobox(“getValue”);
alert(“当前选择的是:”+selectText);
}//禁用当前选择框
function disable(){
$(“#cc”).combobox(“disable”);
}//启用当前选择框
function enable(){
$(“#cc”).combobox(“enable”);
}
$(‘#cc1’).combobox({
filter: function(q, row){var opts = $(this).combobox(‘options’);return row[opts.textField].indexOf(q) == 0;
},
formatter: function(row){var opts = $(this).combobox(‘options’);returnrow[opts.textField];
}
});
ComboBox
单项选择的ComboBox:
Alabama
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
本地数据源的Combobox
来源网页数据的Combobox
多项选择的ComboBox: