精华内容
下载资源
问答
  • 下拉多选控件示例源码 源码描述: 自定义一款下拉多选控件学习实例 可以通过ComboBox下拉选择多项内容并且动态绑定到listbox内容中 他们之间绑定是相互影响的。
  • asp.net 自定义下拉多选控件

    千次下载 热门讨论 2012-03-04 10:26:24
    自定义下拉多选控件,支持多选,基于JQuery
  • 原生js实现的下拉多选控件,文件包里的demo.html列出了本文所讲方法函数的使用示例,可运行demo.html看看效果更有助于理解应用。
  • 下拉多选控件介绍

    千次阅读 2017-07-21 16:12:55
    推荐一个很好用的下拉多选控件,这个控件是原生js写的,使用时只需引入一个js和一张样式图片就可以了。控件人性化设计,可以根据场景需要设置相应的功能。

    下拉多选控件介绍

     

     

    一、    控件外貌

    1.        页面展现外貌

    图v.1 控件页面展现样貌:

    图v.2 控件禁用时的状态:

    图v.3 控件有全选按钮时的状态:

     

    2.    控件文件外貌

    图v.4控件原生js写的,引入项目时只需要引入一个js和一张图片就可以啦

    图v.5 为了方便调用控件函数,我已经把能调用的函数都写到控件源码文件的注释里

    图v.6可以在控件源码头定制适合你的功能

    二、demo外貌

    1.       页面展现外貌

    图v.7 页面展现外貌,提供了几个示例,运行效果如下

    2、代码示例外貌

    图v.8 示例代码外貌,首先是对这个控件方法、参数的详解

    图v.9 示例代码外貌,接下来是调用控件的示例代码

    图v.10 示例代码外貌,示例中的html代码

     

     

    三、附加说明

              文件包里的demo.html列出了本文所讲方法函数的使用示例,可运行demo.html看看效果更有助于理解应用,如果在应用中发现控件缺陷可加QQ群376687100,或发送邮件至zgwyfz@163.com反馈意见或提出建议,一起探讨完善这个控件.(注:最新的版本都发布在376687100这个QQ群,如果想获取最完善的那个,请加这个QQ群)

    下载链接(加QQ群 376687100 可免积分获取):下载页面★…

    展开全文
  • ASP.NET上直接可用的DropDownCheckList下拉多选控件,已编译直接添加后可以在工具中拖选使用,非常方便快捷。 Creates a multi selection check box group which is displayed and hidden on the client through the...
  • 在做web页面时常常会用到EasyUI增加页面的效果,今天自定义两个EasyUI的控件,下拉单选和下拉...废话不多说,直接切入主题下拉多选控件新建一个Web用户自定义控件WebSelection.ascx前台页面代码<%@ Control Language

    在做web页面时常常会用到EasyUI增加页面的效果,今天自定义两个EasyUI的控件,下拉单选和下拉多选,
    在使用EasyUI时需要引用EasyUI的样式和js ,提供一个下载地址http://www.jeasyui.net/download/
    废话不多说,直接切入主题

    下拉多选控件

    新建一个Web用户自定义控件WebSelection.ascx

    前台页面代码

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebSelection.ascx.cs" Inherits="Easyu.Controls.WebSelection" %>
    //添加一个下拉控件,指定样式easyui-combotree,根据自己需求设定控件的宽高
    <select id="<%=this.ID %>" class="easyui-combotree" style="width: 205px; height: 24px;"></select>
    //设置该控件的数据和属性
    <script type="text/javascript">
        //绑定下拉多选数据列表
        var json = <%=JsonString%> //后台获取的Josn字符串
        $('#<%=this.ID %>').combotree({
            valueField: "id", //Value字段
            textField: "text",//Text字段
            multiple: true,
            panelHeight: 'auto',
            data: json, //数据源
            onCheck: function (node, checked) {
                //让全选不显示
                $("#<%=this.ID %>").combotree("setText", $("#<%=this.ID %>").combobox("getText").toString().replace("全选,", ""));
            },
            onClick: function (node, checked) {
                //让全选不显示
                $("#<%=this.ID %>").combotree("setText", $("#<%=this.ID %>").combobox("getText").toString().replace("全选,", ""));
            }
        });
        //获取选中的值
        function GetSelectionValue(obj)  
        {
            var SelectionValue = "";
            //控件使用时会将控件名称WebSelection设置为该控件的ID,在使用方法GetSelectionValue(obj) 时,不给该方法传入参数,则使用默认的ID,如何不传参数,并且修改了控件的ID,那么GetSelectionValue(obj) 方法将获取不到值
            var id = obj == undefined ? "WebSelection" : obj;
            if ($("#" + id + "").combobox("getText") == "") { SelectionValue = ""; }
            else {
                SelectionValue = $("#" + id + "").combobox("getText").toString();
                if (SelectionValue.substr(0, 1) == ",") {
                    SelectionValue = SelectionValue.substring(1, SelectionValue.length);
                }
            }
            return SelectionValue;
        }
        //获取选中的ID
        function GetSelectionID(obj) 
        {
            var SelectionID = "";
            //控件使用时会将控件名称WebSelection设置为该控件的ID,在使用方法GetSelectionID(obj) 时,不给该方法传入参数,则使用默认的ID,如何不传参数,并且修改了控件的ID,那么GetSelectionID(obj) 方法将获取不到值
            var id = obj == undefined ? "WebSelection" : obj;
            if ($("#" + id + "").combobox("getValues") == "") { SelectionID = ""; }
            else {
                SelectionID = $("#" + id + "").combobox("getValues").toString();
                if (SelectionID.substr(0, 1) == ",") {
                    SelectionID = SelectionID.substring(1, SelectionID.length);
                }
            }
            return SelectionID;
        }
    
    </script>

    后台页面代码

        public partial class WebSelection : System.Web.UI.UserControl
        {
            public static string JsonString = string.Empty;
            public static string HelisStr = string.Empty;
            /// <summary>
            /// 数据源
            /// </summary>
            public List<ControlTools> controllist { get; set; }
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    //拼接Json
                    if (controllist != null && controllist.Count > 0)
                    {
                        JsonString = "";
                        HelisStr = "";
                        JsonString = "[{ \"id\": \"\",\"text\": \"全选\", \"children\": [";
                        for (int i = 0; i < controllist.Count; i++)
                        {
                            if (controllist[i].Value != "" && controllist[i].ID != "")
                            {
                                HelisStr += "'" + controllist[i].Value + "',";
                                JsonString += "{\"id\":\"'" + controllist[i].ID + "'\",\"text\":\"" + controllist[i].Value + "\"},";
                            }
                        }
                        JsonString += "  ]}]";
                        if (HelisStr != "")
                        {
                            HelisStr = HelisStr.Substring(0, HelisStr.Length - 1);
                        }
                    }
    
                }
            }
        }

    在此之前我们需要创建一个类ControlTools,

     public class ControlTools
      {
          /// <summary>
          /// ID
          /// </summary>
          public string ID { get; set; }
          /// <summary>
          /// Value
          /// </summary>
          public string Value { get; set; }
      }

    在调用该用户自定义控件时页面利用该类给控件赋值

    下拉单选控件

    新建一个Web用户自定义控件WebSingleSelection.ascx

    前台页面代码

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebSingleSelection.ascx.cs" Inherits="Easyu.Controls.WebSingleSelection" %>
    //添加一个下拉控件,指定样式easyui-combotree,根据自己需求设定控件的宽高
    <select id="<%=this.ID %>" class="easyui-combobox" style="width: 205px; height: 24px;"></select>
    <script type="text/javascript">
        //绑定下拉单选数据列表
        var json = <%=JsonString%>
        $('#<%=this.ID %>').combotree({
            valueField: "id",
            textField: "text",
            panelHeight: 'auto',
            data: json
        });
        //获取选中的值
        function GetSingleSelectionValue(obj)
        {
            var SingleSelectionValue = "";
            var id = obj == undefined ? "WebSingleSelection" : obj;
            if ($("#" + id + "").combobox("getText") == "") { SingleSelectionValue = ""; }
            else {
                SingleSelectionValue = $("#" + id + "").combobox("getText").toString();
                if (SingleSelectionValue.substr(0, 1) == ",") {
                    SingleSelectionValue = SingleSelectionValue.substring(1, SingleSelectionValue.length);
                }
            }
            return SingleSelectionValue;
        }
        //获取选中的ID
        function GetSingleSelectionID(obj)
        {
            var SingleSelectionID = "";
            var id = obj == undefined ? "WebSingleSelection" : obj;
            if ($("#" + id + "").combobox("getValues") == "") { SingleSelectionID = ""; }
            else {
                SingleSelectionID = $("#" + id + "").combobox("getValues").toString();
                if (SingleSelectionID.substr(0, 1) == ",") {
                    SingleSelectionID = SingleSelectionID.substring(1, SingleSelectionID.length);
                }
            }
            return SingleSelectionID;
        }
    
    </script>

    后台页面代码

    public partial class WebSingleSelection : System.Web.UI.UserControl
     {
          public static string JsonString = string.Empty;
          public static string HelisStr = string.Empty;
          /// <summary>
          /// 数据源
          /// </summary>
          public List<ControlTools> controllist { get; set; }
          protected void Page_Load(object sender, EventArgs e)
          {
              if (!IsPostBack)
              {
                 //拼接Json
                  if (controllist != null && controllist.Count > 0)
                  {
                      JsonString = "";
                      HelisStr = "";
                      JsonString = "[";
                      for (int i = 0; i < controllist.Count; i++)
                      {
                          if (controllist[i].Value != "" && controllist[i].ID != "")
                          {
                              HelisStr += "'" + controllist[i].Value + "',";
                              JsonString += "{\"id\":\"" + controllist[i].ID + "\",\"text\":\"" + controllist[i].Value + "\"},";
                          }
                      }
                      JsonString += "]";
                      if (HelisStr != "")
                      {
                          HelisStr = HelisStr.Substring(0, HelisStr.Length - 1);
                      }
                  }
    
              }
          }
      }

    新建测试页面TestPage.aspx

    前台代码

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
       <%--引用easyui样式及js--%>
        <link href="../jquery-easyui-1.4.3-1/themes/default/easyui.css" rel="stylesheet" />
        <link href="../jquery-easyui-1.4.3-1/themes/icon.css" rel="stylesheet" />
        <script src="../jquery-easyui-1.4.3-1/jquery-1.7.2.min.js"></script>
        <script src="../jquery-easyui-1.4.3-1/jquery.easyui.min.js"></script>
        <script type="text/javascript">
            //下拉多选获取值
            function WebSelectionGetValue()
            {
                var value = GetSelectionValue();
                alert(value);
            }
            //下拉多选获取ID
            function WebSelectionGetID()
            {
                var id = GetSelectionID();
                alert(id);
            }
            //下拉单选获取值
            function WebSingleSelectionGetValue() {
                var value = GetSingleSelectionValue();
                alert(value);
            }
            //下拉单选获取ID
            function WebSingleSelectionGetID() {
                var id = GetSingleSelectionID();
                alert(id);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            下拉多选:
            <uc1:WebSelection runat="server" ID="WebSelection" />
            <input  type="button" value="GetValue" onclick="WebSelectionGetValue();" />
            <input  type="button" value="GetID" onclick="WebSelectionGetID();" />
        </div>
        <div>
            下拉单选:
            <uc1:WebSingleSelection runat="server" ID="WebSingleSelection" />
            <input type="button" value="GetValue" onclick="WebSingleSelectionGetValue();" />
            <input type="button" value="GetID" onclick="WebSingleSelectionGetID();" />
        </div>
        </form>
    </body>
    </html>

    后台代码

    protected void Page_Load(object sender, EventArgs e)
    {
        Bind();
    }
    public void Bind()
    {
       DataTable dt= new DataTable();//这里是需要绑定的数据源
       List<ControlTools> list = new List<ControlTools>();
       for (int i = 0; i < dt.Rows.Count; i++)
       {
           list.Add(new ControlTools { ID = dt.Rows[i]["ID"].ToString(), Value = dt.Rows[i]["Name"].ToString() });
       }
       WebSelection.controllist = list;
       WebSingleSelection.controllist = list;
    }

    测试页面效果
    页面运行效果1
    页面运行效果2
    页面运行效果3
    页面运行效果4
    页面运行效果5

    以上代码本人亲测,效果图片已经贴出,在控件数据源这里,用户大可根据自己的需求来适当进行调整,本人做的这两个控件只要将数据源配好,基本上是通用的,不喜勿喷

    展开全文
  • 自己封装的继承自C# Winform中ComboBox的下拉多选控件,操作简单,效果非常好。①,可设置允许单选或多选。②,可绑定List,DataTable,Dictionary,string>类型的数据源。③,在下拉列表中可显示自定义的多列数据。...
  • PB9下拉多选控件.zip

    2020-04-28 13:53:50
    PB下拉框多选功能,以及传参数方法和界面。
  • 原生js实现的下拉多选控件 一、 各函数的使用方法和其作用简介 1. 调用本控件的函数 CheckboxSelect("selectid"); a) 详解:这个函数带一个参数,参数为select标签的id; b) 注意:这个函数调用的时候一定要放在...

    原生js实现的下拉多选控件

     

    一、    各函数的使用方法和其作用简介

    1.    调用本控件的函数

    CheckboxSelect("selectid");

    a)      详解:这个函数带一个参数,参数为select标签的id;

    b)      注意:这个函数调用的时候一定要放在以下任意的一个方法中:

         ①    jQuery方法:$(document).ready(function(){     });

         ②    js方法:window.onload =function()}

            

    图v.1 控件页面展现样貌:

     

    图v.2 控件禁用时的状态:

    图v.3 控件源码截图:

     

     

    2.    取值函数

    a)      以<optionvalue="130305591928">text</option>为例:

         ①    取value值:getCheckboxOptionValues(“selectid”)(参数”selectid”为select的id,这里取得"130305591928"这个值)

         ②    text值:getCheckboxOptionTexts(“selectid”)(参数”selectid”为select的id,这里取得“text”这个值

    图v.4 取值示例:

    3.    重置函数(恢复初始未选择的状态)

    resetCheckboxOptionSelecteds(“selectid”)

    a)     详解:这个函数带一个参数,参数为select标签的id;

    4.    赋值函数

    setCheckboxOptionSelecteds(selectid,selectOptionValues”,”,”); 

    a)      详解:这个函数带两个参数

         1)  参数1(selectid):select标签的id;

        2) 参数2(selectOptionValueStr”):一串用特定符号隔开的value值

        3) 参数3(”,”):隔开select标签中value值的那个特定符号

    5.    值改变事件监听方法

    CheckboxSelectOnChange("seleid",function(newV,oldV){

             alert("内容改变!\n\t新值:"+newV+"\n\t旧值:"+oldV);

    });

    a)     参数详解:

        1)     selectid:select标签的id;

        2)     newV参数:改变后的新值;

        3)     oldV参数:改变前的值;

     

    6.    自定义控件参数

    可以在CheckboxSelect.js文件中自定义适合自己项目的参数,如图:

    7.   附加说明

    文件包里的demo.html列出了本文所讲方法函数的使用示例,可运行demo.html看看效果更有助于理解应用,如果在应用中发现控件缺陷可加QQ群376687100,或发送邮件至zgwyfz@163.com反馈意见或提出建议,一起探讨完善这个控件.(注:最新的版本都发布在376687100这个QQ群,如果想获取最完善的那个,请加这个QQ群)

    下载链接(加QQ群 376687100 可免积分获取):下载页面★…

     

    展开全文
  • asp.net下拉多选控件

    2015-07-10 10:11:39
    网上找来的,非原创。内含控件dll和完整的调用示例。
  • 新增页面使用el-select multiple 下拉多选控件,并设置了非空校验,打开页面时,下拉多选控件会自动触发表单非空校验,如下图所示: 预期效果是:打开页面,职能属性和其他属性一样,不会自动触发表单非空校验...

    场景:

            新增页面使用  el-select multiple 下拉多选控件,并设置了非空校验,打开页面时,下拉多选控件会自动触发表单非空校验,如下图所示:

          预期效果是:打开页面,职能属性和其他属性一样,不会自动触发表单非空校验,而是在操作当前属性时触发。

         经过查询和测试,目前找到两种方法,但总体都是思路都是一致,设置初始值为空数组即可

    解决方法:

    第一种:

         页面初始化时,设置当前属性(职能属性)初始值为空数组,例如:[] 

    export default {
            data() {
                return {
                    open:false,
                    edit:false,
                    loading:false,
                    languageModule: this.$t('pages....list.form'),
                    id:'',
                    ruleForm:{
                        officeType: [],     //职能属性
                        modelCategoryId: '',
                    },
                    rules:{
                        officeType: [
                            { required: true, message: '职能属性不能为空', trigger: 'change' }
                        ],
                        modelCategoryId : [
                            {required: true, message: '所属分类不能为空', trigger: 'change'}
                        ]
                    }
                }
            },
    }

    第二种方法:

      使用钩子函数,在创建页面时,重置对应属性的值,代码如下:

            created() {
                let _self = this;
                _self.$nextTick(()=>{
                    //_self.ruleForm  为页面属性接收值   //officeType 为下拉框v-model对应的值
                    _self.$set(_self.ruleForm, 'officeType', [])
                })
            },

    注:

       _self.ruleForm 对象为上述第一种方法中的ruleForm对象

    最终效果:

     

    上述为部分代码示例,原先因为后端返回职能属性(officeType)多选值为字符串,于是在开发页面时,将当前属性也设置默认值为 空字符串,这时就会出现打开页面就自动触发表单校验。

     

    题外话:

            本文是我的第一篇Vue相关文章,近期因为项目需要,我开始接触Vue,并在公司框架下参与开发页面,我主开发语言是Java,主后端,前端很多用词和写法可能不是很规范,请大佬们指出并多多包涵,大家一起互相进步。

    展开全文
  • 一个支持下拉多选控件,可以看作是combobox和checkboxlist合体版,有源码,已改进!!!!!!!!!喜欢钻研的技术宅可以再改进一下~
  • 一个支持下拉多选控件,可以看作是combobox和checkboxlist合体版,有源码,喜欢钻研的技术宅可以试着改进一下~
  • 这里我也不知道用什么方式获取多选值比较好,只能用比较原始的方式了,如果有大神告诉更好的方法,请留言,感激不尽! 1. 直接val()获取 function doSubmit(){ alert($("#channels").val()); $("#...
  • 首先上效果图 代码片段: 有需要的朋友微信联系我。 如果这篇文章对您有帮助,您可以打赏我 技术交流QQ群:15129679 转载于:...
  • 几近项目需要一个有下接多选选择功能控件。在网上找了很久才发现,自己也写了一引些,都不理想。原来JQuery已有实现,且功能强大。先记录一下,以便以后不时之用。   demo地址: ...
  • 继承自C# Winform中ComboBox的下拉多选控件,操作简单,效果非常好 1、多选。 2、可绑定List,DataTable,Dictionary类型的数据源。 3、在下拉列表中可显示自定义的多列数据。 4、可在下拉列表中通过输入关键字,...
  • c#winform下拉多选自定义控件(带全选),可以自己定义选择项的下拉框
  • 下拉多选搜索控件

    2017-09-23 20:21:24
    最近做项目需要一个可以多选和搜索的下拉控件。所以自己做了基于jquery的控件。数据都是json进行编辑控制 目前支持设置单选、多选,暂时不支持异步加载的实现。 主要方法:setIsMult 设置多选/单选、...
  • 控件支持下拉 多选、搜索。基于jquery实现,暂时没有分页加载功能,还在继续完善中
  • 通过读取数据表生成一个可供多选下拉列表控件,要求数据表中至少要有“编码”和“名称”两个字段,字段名任意。并且“编码”字段是主键,字符型或数字值都可以。 使用示例: uo_1.i_sqlselect='from demotab'//这...
  • 控件包含一个文本框,一个图像按钮和下拉列表。默认的样式如下: 单击文本框或图片按钮将展开下拉列表     当选择项目后,文本框会自动显示用逗号隔开的选中项。被选择中的项使用不同的样式显示,你可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,124
精华内容 4,849
关键字:

下拉多选控件