easyui前端实现多选框_EasyUI实现下拉框多选功能

本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码，供大家参考，具体内容如下

效果图：

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

利用EasyUI实现多选下拉框

ul{

width: 200px !important;

}

li{

width: 50px !important;

float: left !important;

}

$(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("全选,", ""));

}

});

})

多选：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。