AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
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.wanshiok.com:81//201701/yuanma/ComboBox_51zixue.rar

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


jquery,下拉框,多选  
上一篇:Vue.js系列之项目搭建(1)  下一篇:jQuery实现可拖拽3D万花筒旋转特效