收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

EasyUI实现下拉框多选功能

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

效果图:

查看图片

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

<html> 
 <head> 
  <meta charset="utf-8" /> 
  <title>利用EasyUI实现多选下拉框</title> 
  <link rel="stylesheet" type="text/css" href="css/easyui.css" rel="external nofollow" /> 
  <style type="text/css"> 
   ul{ 
    width: 200px !important; 
   } 
   li{ 
    width: 50px !important; 
    float: left !important; 
   } 
  </style> 
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
  <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></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> 

下载地址:EasyUI实现下拉框多选

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持积木网。

基于jQuery中ajax的相关方法汇总(必看篇)
前提条件话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦。scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"type="text/javascript"/script具体方法①load()使

基于jQuery的$.getScript方法去加载javaScript文档解析
1.两个文件的代码如下:scriptfunctionAjax(){//将9-4.html中的Ajax()函数进行修改$.getScript('9-8.js',function(data){varhtml="tableborder='1'cellpadding='2'";$.each(comments,function(In

jQuery实现的简单无刷新评论功能示例
本文实例讲述了jQuery实现的简单无刷新评论功能。分享给大家供大家参考,具体如下:htmlxmlns="http://www.w3.org/1999/xhtml"headtitle无刷新评论-www.gimoo.net/titlesc

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的!
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号