之前猫哥已经分别演示了如何从json文件、如何从后端（比如Servlet）返回的json数据中加载数据到EasyUI控件。所以对于这四个数据控件，猫哥仅演示从json文件中获取数据后绑定即可，这样非常简洁明了，到了项目开发演示的阶段，根据需求一些地方就会使用后端过来的数据。
因为数据控件的使用频率高、需要说明的地方也多，尤其是表格（涉及很多内容比如分页、带复选框），所以本篇单独讲下拉框的实现及其数据的绑定。
先看示意图：
其中用到了一个users_data.json文件，在webroot下的json文件夹下，具体内容为：
[ { "userId":"1", "userName":"test", "userEmail":"maoge@maoge.com", "userSex":"1" }, { "userId":"2", "userName":"haha", "userEmail":"haha@maoge.com", "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>
