easyui的combobox 默认值以及回显-优快云博客

本文链接：https://blog.youkuaiyun.com/liyang1987ly/article/details/84601807

本文介绍如何使用EasyUI中的ComboBox组件设置默认值及实现数据回显。通过具体的代码示例，详细展示了如何在加载数据后设置默认选中项，并在需要时将之前选择的数据重新显示出来。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小弟最近用easyui部署项目，用到了 combobox，研究了下默认值以及回显，话不多说，直接上代码。
1.先看获取默认值的第一项
$.ajax({
url:"chanel/getAll.do",
type:"post",
datatype:"json",
success:function(data){
if(data){
$('#chanel').combobox({
data:data,
valueField:'chanelId',
textField:'chanelName',
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "chanelId") {
$(this).combobox("select", val[0][item]);
}
}
}
});
}else{
data = [];
}
}
});
这个是前台的调用后台的代码用的jquery ajax最根本就是这个：
for (var item in val[0]) {
if (item == "chanelId") {
$(this).combobox("select", val[0][item]);
}
}
这个是设置默认选中第一项。当然在这个地方也做了容错，就是当data为空的时候赋值data一个空数组。好默认值到此完事
2.看下回显
回显应该是修改最多用到
$.ajax({
url:"chanel/getAll.do",
type:"post",
datatype:"json",
success:function(data){
if(data){
$('#chanel').combobox({
data:data,
valueField:'chanelId',
textField:'chanelName',
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var i = 0;i<val.length;i++ ) {
if (val[i].chanelId==row[0].chanelId) {
$(this).combobox("select",row[0].chanelId);
}
}
}
});
}else{
data = [];
}
}
});
当然代码跟上面的差不多，主要是在
for (var i = 0;i<val.length;i++ ) {
if (val[i].chanelId==row[0].chanelId) {
$(this).combobox("select",row[0].chanelId);
}
}
做了个判断，然后去赋值，就这么简单。
注意这个地方的valueField跟textField跟自己的匹配