关于向easyui插件combobox,添加下拉选项

今天在开发过程中,遇到了一个如何关于向easyui插件combobox,添加下拉选项的问题。搞了很久,终于曲线找到了一条解决办法,把解决问题的过程记录如下,供有需要的人参考。
源代码如下,通过ajax调用,从服务端返回json字符串,并显示在客户端。

$('#test').combobox({
url:'地址',
valueField:'version',
textField:'name',
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0; // 同一转换成小写做比较,==0匹配首位,>=0匹配所有
}
});

现在需要对,返回的结果,增加一个值对选项。
最先想到的办法当然是通过操作combobox对象属性进行添加。但通过查看官方API,没有提供相应的方法。
好在有google和baidu,结果搜了一把,没有任何可用方案。网上有方案如下:

$('#test').append('<option value="">增加内容</option>');

证实这个方案起不到任何作用。
最后想用最直接的方法,后台在返回数据的时候,添加上我需要的键值对,这样前台显示的内容有了,但总感觉这个方法有点挫,还是不甘心就这么作罢了。
再次查看官方API,发现有个data属性,自动将data属性对应的json对象,解析为combobox下拉列表。突然想到,通过设置、修改data属性值来完成combobox下拉列表的添加。改造代码如下:

$.ajax({
url: '远程地址',
dataType: 'json',
success: function(jsonstr){
// 修改ajax返回的值
jsonstr.push({
'name':'新增值',
'version':'新增键'
});
$('#test').combobox({
data:jsonstr,
valueField:'version',
textField:'name',
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0; // 同一转换成小写做比较,==0匹配首位,>=0匹配所有
}
});
}
});

这样,就解决了通过服务端返回的数据,使用combobox,在前端进行动态添加修改键值对。绕了一圈,总算解决问题。
PS:如果大家有其他什么好的方法,欢迎提供。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值