之前貓哥已經分别示範了如何從json檔案、如何從後端（比如Servlet）傳回的json資料中加載資料到EasyUI控件。是以對于這四個資料控件，貓哥僅示範從json檔案中擷取資料後綁定即可，這樣非常簡潔明了，到了項目開發示範的階段，根據需求一些地方就會使用後端過來的資料。
因為資料控件的使用頻率高、需要說明的地方也多，尤其是表格（涉及很多内容比如分頁、帶複選框），是以本篇單獨講下拉框的實作及其資料的綁定。
先看示意圖：
[
{
"userId":"1",
"userName":"test",
"userEmail":"[email protected]",
"userSex":"1"
},
{
"userId":"2",
"userName":"haha",
"userEmail":"[email protected]",
"userSex":"0"
}
]
具體實作如下，注意文字描述：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>下拉框combobox示例</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-panel" title="示例 簡單下拉框" style="width:400px;padding:10px 10px;">
<div>使用easyui-combobox樣式即可</div>
<select id="hobby" class="easyui-combobox" label="興趣愛好:" labelPosition="left" style="width:100%;">
<option value="football">足球</option>
<option value="basketball">籃球</option>
</select>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getSelectedHobby()">擷取選中值</a>
</div>
<div class="easyui-panel" title="示例 靜态綁定資料" style="width:400px;padding:10px 10px;">
<div>靜态綁定users_data.json檔案中的資料，注意可以将url換成servlet的url，就可以直接擷取後端的資料，當然，後端的資料需要以json格式傳回</div>
<div>注意valueField和textField分别對應json資料中的‘鍵’，還有一點就是select标簽換成input也是可行的</div>
<select id="name" class="easyui-combobox" style="width:100%;" data-options="
url:'json/users_data.json',
valueField: 'userId',
textField: 'userName',
label: '選擇使用者',
labelPosition: 'top'">
</select>
</div>
<div class="easyui-panel" title="示例 動态綁定資料" style="width:400px;padding:10px 10px;">
<div>通過js動态綁定資料</div>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="bindUsersInfo()">綁定</a>
<select id="usersSelect" class="easyui-combobox" style="width:100%;" data-options="
valueField: 'userId',
textField: 'userName',
label: '選擇使用者',
labelPosition: 'top'">
</select>
</div>
<script type="text/javascript">
function getSelectedHobby(){
var value=$("#hobby").combobox("getValue");
alert(value);
}
function bindUsersInfo(){
$('#usersSelect').combobox('reload', 'json/users_data.json');
}
</script>
</body>
</html>
![json擷取資料的三種方式[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)