說明：開發環境 vs2012 asp.net mvc4 c#
1、效果圖
2、HTML代碼
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EasyuiCombotree.aspx.cs" Inherits="MvcAppTest.EasyuiCombotree" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Easyui Combotree 測試</title>
<link href="Easyui/themes/default/easyui.css" rel="stylesheet" />
<script src="Easyui/jquery-1.7.2.js"></script>
<script src="Easyui/jquery.easyui.min.js"></script>
<script src="Easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"> $(function () { $('#cc').combobox({ url: 'Home/getOffice', valueField: 'id', textField: 'text', required: true, queryParams: { OFFID: 100 }, editable: false,//不可編輯，只能選擇
disabled: false, value: '選擇部門' }); }); function getValue() { var value = $('#cc').combobox('getValue'); alert(value); } function getText() { var text = $('#cc').combobox('getText'); alert(text); } </script>
</head>
<body>
<input id="cc" name="dept" value="" />
<div><input type="button" value="獲取Value的值" style="width:100px;" onclick="getValue()"/> <input type="button" value="獲取text的值" onclick="getText()" style="width:100px;" /></div>
<div style="height:30px;"></div>
<span>combobox 另一種定義形式</span>
<div>
<select id="Select1" class="easyui-combobox" name="dept" style="width:200px;">
<option value="aa">aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>
</div>
</body>
</html>
3、Home后台代碼
public JsonResult getOffice(string OFFID) { Int32 officeID = Convert.ToInt32(OFFID); List<ComboModel> myList = new List<ComboModel>(); for (int i = 1; i < 20; i++) { ComboModel model = new ComboModel() { id=i, text="部門"+i.ToString() }; myList.Add(model); } return Json(myList, JsonRequestBehavior.DenyGet); }
public class ComboModel { public System.Int32 id { get; set; } public System.String text { get; set; } }