jquery.easyui的ComboBox使用

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、页面效果

该下拉框是可以进行输入筛选的,也可以进行选择;

 

 

建议:有问题,请查官网,不要百度。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值