您的位置：首页 > 产品设计 > UI/UE

EasyUI之下拉列表框comboBox

2017-04-09 20:54 369 查看

1.布局



下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

2.练习1：静态方式1生成下拉列表框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>comboBox</title>
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<select id="cityID" class="easyui-combobox" name="city" style="width:200px;">
<option value="wuhan">wuhan</option>
<option>beijing</option>
<option>shanghai</option>
<option>guangzhou</option>
<option>hangzhou</option>
</select>
</body>
</html>


结果：



3.练习2：静态方式2生成下拉列表框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>comboBox</title>
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<input id="cityID" name="city"/>
</body>
<script type="text/javascript">
var cityJson =[{"id":1,"text":"wuhan"},{"id":2,"text":"shanghai"},{"id":3,"text":"hangzhou"}];
$("#cityID").combobox({
data:cityJson,
valueField:'id',
textField:'text'
});
</script>
</html>



4.练习3：动态方式生成下拉列表框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>comboBox</title>
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<input id="cityID" name="city"/>
</body>
<script type="text/javascript">
$("#cityID").combobox({
url:'json/city.json',
valueField:'id',
textField:'text'
});
</script>
</html>
结果：



如果以后使用springmvc，则可以使用返回的json串的url接收。



5.文档









内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航