1、html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>easyui-combobox</title>
<link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.ico'}">
<link rel="stylesheet" type="text/css" href="@{'/public/jquery-easyui-1.4/themes/default/easyui.css'}">
<link rel="stylesheet" type="text/css" href="@{'/public/jquery-easyui-1.4/themes/icon.css'}">
<script src="@{'/public/jquery-easyui-1.4/jquery.min.js'}" type="text/javascript"></script>
<script src="@{'/public/jquery-easyui-1.4/jquery.easyui.min.js'}" type="text/javascript"></script>
</head>
<body>
<input id="cc" name="dept" value="请输入或者选择">
<select id="cc1" class="easyui-combobox" name="dept" style="width:200px;">
#{list list}
<option value="${_?.id}">${_?.name}</option>
#{/list}
</select>
</body>
<script type="text/javascript">
$("#cc").combobox({
valueField:"id",
textField: "name",
url: '@{Application.testData}'
});
</script>
</html>
注意:jquery必须放在jquery-easyui之前引用;
2、Java代码(play1.x 框架)
public static void test(){
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", 1);
map.put("name", "java");
list.add(map);
map = new HashMap<String, Object>();
map.put("id", 3);
map.put("name", "c#");
list.add(map);
map = new HashMap<String, Object>();
map.put("id", 6);
map.put("name", "python");
list.add(map);
render(list);
}
public static void testData() {
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", 1);
map.put("name", "java");
list.add(map);
map = new HashMap<String, Object>();
map.put("id", 3);
map.put("name", "c#");
list.add(map);
map = new HashMap<String, Object>();
map.put("id", 6);
map.put("name", "python");
list.add(map);
renderJSON(list);
}
## 路由配置
GET /test Application.test
* /testData Application.testData
3、页面效果
该下拉框是可以进行输入筛选的,也可以进行选择;
建议:有问题,请查官网,不要百度。