当前位置：首页 > 资讯 > 技术文档

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

时间：2021-02-27 02:19 编辑：来源：阅读：
扫一扫，手机访问

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

[b]一、说明[/b] 本文是利用EasyUI实现下拉框多选功能，在ComboxTree其原有的基础上对样式进行了改进，样式表已上传demo，代码如下 [b]二、代码[/b]

<!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>

[b]三、效果[/b] [img]http://files.jb51.net/file_images/article/201701/201701030917501.png[/img] [img]http://files.jb51.net/file_images/article/201701/201701030917502.png[/img] [img]http://files.jb51.net/file_images/article/201701/201701030917503.png[/img] [b]四、下载[/b] 　　案例下载：[url=http://wd.jb51.net:81//201701/yuanma/ComboBox_jb51.rar]http://wd.jb51.net:81//201701/yuanma/ComboBox_jb51.rar[/url] 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网！

全部评论(0)

上一篇：jquery简单实现图片切换效果的方法
下一篇：jQuery图片轮播的具体实现

资讯排行榜
更多>>