一、說明
本文是利用EasyUI實現下拉框多選功能，在ComboxTree其原有的基礎上對樣式進行了改進，樣式表已上傳demo，代碼如下
二、代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>利用EasyUI實現多選下拉框</title> <link rel="stylesheet" type="text/css" href="EasyUI/easyui.css" /> <script type="text/javascript" src="EasyUI/jquery.min.js"></script> <script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></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.VeVB.COm:81//201701/yuanma/ComboBox_jb51.rar
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
