EasyUI實現下拉框多選

效果圖：

這個沒什么說的，直接引入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

本文鏈接：https://blog.csdn.net/Bright2017/article/details/78466743

智能推薦

下拉框多選

1.引入多選的JS 2.html中select標簽上加multiple="multiple"，例如： 3.js中寫如下代碼效果圖 PS:不知道你們有沒有遇到了這樣的情況遇到這種情況的小伙伴，可以在它的父層DIV加上overflow:visible...

C#多選下拉框實現網上找了一圈，沒有找到比較輕量好用的該種功能的控件，所以自己實現了一個。效果如如下：思路 1.基于原生控件ComboBox和CheckedListBox來實現，其中ComboBox負責顯示多選結果和提供下拉按鈕，然后CheckedListBox負責提供下拉多選操作 2.ComboBox設置為自繪，DropDownStyle為ComboBoxStyle.DropDown，下拉...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

EasyUI實現下拉框多選

智能推薦

猜你喜歡