<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script> <link type="text/css" rel="Stylesheet" href="jquery-easyui-1.6.11/themes/default/easyui.css" /> <link type="text/css" rel="Stylesheet" href="jquery-easyui-1.6.11/themes/icon.css" /> <script type="text/javascript" src="jquery-easyui-1.6.11/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.6.11/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function () { $.ajax({ type: "Post", url: "easyuiComboBox.aspx/GetBrowser", // data: "{}", contentType: "application/json;charset=utf-8", dataType: "json", success: function (data) { $('#first_catalogue').combobox({ data: eval(data.d), //eval(data.d)将JSON的字符串解析成JSON数据格式 valueField: 'value', textField: 'text', groupField: 'group', required: true, editable: false, onLoadSuccess: function () { //加载完成后,设置选中第一项 var val = $(this).combobox("getData"); //设置第一个值为选中值 $(this).combobox("select", val[0].text); }, onChange: function () { //getValue,getText分别获取value值,text var val = $('#first_catalogue').combobox("getText"); alert(val); } }); }, error: function (err) { alert(JSON.parse(err.responseText).Message); } }); }); </script>
html
<input class="easyui-combobox" id="first_catalogue" style="width: 30%;" value="--请选择所属分类--">
后台代码
[WebMethod] public static string GetBrowser() { string json = "[{\"value\":\"f20\",\"text\":\"Firefox 2.0 or higher\",\"group\":\"Firefox\"}" + ",{\"value\":\"f15\",\"text\":\"Firefox 1.5.x\",\"group\":\"Firefox\"}," + "{\"value\":\"f10\",\"text\":\"Firefox 1.0.x\",\"group\":\"Firefox\"}," + "{\"value\":\"ie7\",\"text\":\"Microsoft Internet Explorer 7.0 or higher\",\"group\":\"Microsoft Internet Explorer\"}" + ",{\"value\":\"ie6\",\"text\":\"Microsoft Internet Explorer 6.x\",\"group\":\"Microsoft Internet Explorer\"}]"; return json; //List<Browser> browsers=new List<Browser>(); //Browser b= new Browser(); //b.value ="f20"; //b.text ="Firefox 2.0 or higher"; //b.group="Firefox"; //browsers.Add(b); //JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); //return jsSerializer.Serialize(browsers); }
显示效果