Question

jquery easyui 中的combobox读取后台传递过来的json数据的例子

jsp页面上定义的select下拉列表：
<select id="cc" class="easyui-combobox" style="width: 200px; display: none;" data-options="required:true" comboname="state">
</select>

现在想将后台获取的json数据赋给这个combobox，该如何写jquery代码呢？或者能不能将一个list列表赋给combobox啊，哪位朋友给个这方面的例子吧，非常感谢！！！

Answer 1

第一步，在后台Action 要先生成符合comboboxJson格式的数据，就是将你的list转换为这种格式，通常是Map里面存两个 diCode diName diCode相当于<optiion>里面的value diName 这是text
将组装好的Map放入list 中，然后将list转换为json就好。

第二步，在jsp页面后者其它前台页面直接这样就可以：

<input class="easyui-combobox"
name="cc"
id="cc"
url="<%=path %>/json/dataAction!cascadeAction.action"
valueField="diCode"
textField="diName"
panelHeight="auto" editable="false" />

页面上写input 也可以 写select　也可以　只要你写了class="easyui-combobox"就变成easy-ui的控件了。url是最核心的东西，指向你后台将要返回json的Action

追问

非常感谢，但是我的后台不是对应的action
在jquery中我是想按照已经写的类似的方法来做，就比如下面这段，到那时我就是不知道对不对，并且如何往combobox中放我获取的这些数据，能再帮我看下这段代码吗，我需要怎么修改之类的，非常感谢
sendRequest("GET", "/rest/oam/projectList", params, function(response) {
}

追答

嗯，我想你这段代码已经发送请求了，结果集都在response里面吧，现在只要response符合json格式，那么你可以在js里面：

sendRequest("GET", "/rest/oam/projectList", params, function(response) {

$('#cc').combobox({
url:response,
valueField:'id',
textField:'text'
});

}

你试试

追问

这位朋友能留下你的QQ吗，我想细问下你，非常感谢，不方便的话，也没关系哈哈。

Answer 2

$.getJSON('selectMenus.php', function(data){
var html = '';
var len = data.length;
for (var i = 0; i< len; i++) {
html += '<option value="' + data[i].monthId + '">' + data[i].month + '</option>';
}
$('select.month').append(html);
});

$.ajax({
url:'suggest.html',
type:'POST',
data: 'q=' + str,
dataType: 'json',
success: function( json ) {
$.each(json, function(i, value) {
$('#myselect').append($('<option>').text(value).attr('value', value));
});
}
});

Answer 3

var p=$(":input#cc");
p.empty();
system.period.getPeriods(sid,function(data){
dwr.util.removeAllOptions(p.get(0));
dwr.util.addOptions(p.get(0),data,'id','numCodeStr');
});

这个是用了dwr的。如果你不需要dwr，我就给你发一个纯jq的。

追问

嗯 我不用dwr呢 能不能给我发个纯jq的啊 非常感谢啊

追答

//假设json数据为下面内容
var dataList=[
{ text:"option1", value:"1" },
{ text:"option2", value:"2" },
{ text:"optionn", value:"n" }
];
var mycomb=$(":input#cc"); //或 $("select#cc")
$.each(dataList, function(i, data){
mycomb.append($("",{value:data.value,text:data.text}));
});