jquery实现下拉框多选方法介绍

一、说明

本文是利用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.:81//201701/yuanma/ComboBox_jb51.rar

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# jquery # 下拉框 # 多选 # jQuery实现下拉框多选 jquery-multiselect 的实例代码 # jquery.multiselect多选下拉框实现代码 # 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框 # 一个简单的jquery的多选下拉框(自写) # jQuery对下拉框 # 单选框 # 多选框的操作 # 利用Jquery实现可多选的下拉框 # jquery multiSelect 多选下拉框 # 全选 # 基础上 # 进行了 # 样式表 # 上传 # gt # xmlns # title # head # TR # org # dtd # transitional # easyui # href # script # src # javascript

返回目录在线咨询

上一篇：如何在Golang中开发简易投票网站_前端提交数据后台统计
下一篇：目录网站制作素材图片,excel中怎么制作word文件的目录？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jquery实现下拉框多选方法介绍

您的项目需求