jquery easyui 中的combobox读取后台传递过来的json数据的例子
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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啊，哪位朋友给个这方面的例子吧，非常感谢！！！
将组装好的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吗，我想细问下你，非常感谢，不方便的话，也没关系哈哈。
参考技术A $.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));
);
); 参考技术B 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));
);
easyui combobox动态默认选项设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 引入JQuery --> <script type="text/javascript" src="../JQuery-EasyUI-1.5.1/jquery.min.js"></script> <!-- 引入EasyUI --> <script type="text/javascript" src="../JQuery-EasyUI-1.5.1/jquery.easyui.min.js"></script> <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 --> <script type="text/javascript" src="../JQuery-EasyUI-1.5.1/locale/easyui-lang-zh_CN.js"></script> <!-- 引入EasyUI的样式文件--> <link rel="stylesheet" href="../JQuery-EasyUI-1.5.1/themes/default/easyui.css" type="text/css"/> <!-- 引入EasyUI的图标样式文件--> <link rel="stylesheet" href="../JQuery-EasyUI-1.5.1/themes/icon.css" type="text/css"/> </head> <body> <table id="dg" title="My Users" class="easyui-datagrid" style="width: 550px; height: 250px" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="firstname" width="50">First Name</th> <th field="lastname" width="50">Last Name</th> <th field="phone" width="50">Phone</th> <th field="email" width="50">Email</th> </tr> </thead> </table> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a> </div> <div> <select id="cc" class="easyui-combobox" name="dept" style="width:200px;"> </select> </div> <script type="text/javascript"> var sq=2; $(‘#cc‘).combobox({ data:[{text:‘AAA‘,value:‘0‘,selected:true}, {text:‘BBB‘,value:‘1‘}, {text:‘CCC‘,value:‘2‘}, {text:‘DDD‘,value:‘3‘}],
onLoadSuccess:function(){
$(this).combobox(‘select‘,sq);
} }); </script> </body> </html>
以上是关于jquery easyui 中的combobox读取后台传递过来的json数据的例子的主要内容，如果未能解决你的问题，请参考以下文章
jQuery EasyUI 1.4.4 Combobox无法检索中文输入的问题
jQuery easyui 中 combobox的事件处理吗
jquery easyui combobox怎么设置忽略大小写搜索
jquery easyui combobox 添加添加选择项