EasyUI实现下拉框多选

最新推荐文章于 2023-11-22 16:31:02 发布

Bright2017

最新推荐文章于 2023-11-22 16:31:02 发布

阅读量4.3k

点赞数 3

分类专栏：网页中用到过的效果

网页中用到过的效果专栏收录该内容

138 篇文章 0 订阅

订阅专栏

效果图：

这个没什么说的，直接引入css和js文件和图片，调用js即可。下面是源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>利用EasyUI实现多选下拉框</title>
		<link rel="stylesheet" type="text/css" href="css/easyui.css"/>
		<style type="text/css">
			ul{
				width: 200px !important;
			}
			li{
				width: 50px !important;
				float: left !important;
			}
		</style>
    	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
	    <script type="text/javascript">
	        $(function () {
	            $('#ddlLine').combotree({
	                valueField: "id", //Value字段
	                textField: "text", //Text字段
	                multiple: true,
	                data: [{ "id": 1, "text": "All", "children": [{ "id": 13, "text": "C1" }, { "id": 14, "text": "C2" }, { "id": 15, "text": "C3"}]}],
//                  url: "tree_data2.json", //数据源
	                onCheck: function (node, checked) {
	                    //让全选不显示
	                    $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", ""));
	                },
	                onClick: function (node, checked) {
	                    //让全选不显示
	                    $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", ""));
	                }
	            });
	        })
	    </script>
</head>
<body>
    多选：<select id="ddlLine" class="easyui-combotree" style="width: 205px; height: 24px;">
    </select>
</body>
</html>

下载地址： http://wd.jb51.net:81//201701/yuanma/ComboBox_jb51.rar