精华内容
下载资源
问答
  • select2 使用教程(简)

    万次阅读 2016-11-10 16:11:05
    用了这么久的Select2插件,也该写篇文章总结总结。当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件。 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要...

    用了这么久的Select2插件,也该写篇文章总结总结。当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件。

    在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本。

    官网:http://select2.github.io/ 

    演示:

    由于博客系统的原因,所以只能演示简单的功能。

    一.文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上

    最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用。比如:清除功能allowClear: true

    最新版本请使用<select></select>标签(对于本地化的数据你可以使用input,但ajax远程数据必须使用select)

    二.placeholder

    placeholder占位提示文字,如果需要清楚功能,则必须设置placeholder。

    三.加载本地数据

    select2默认的数据属性是id、text,新版本可以自定义,但还是用默认的比较好。所以提供的json中最好转换为id、text形式,当然可以添加其他属性。

    复制代码
    var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
    $("#c01-select").select2({
      data: data,
      placeholder:'请选择',
      allowClear:true
    })
    复制代码

    四.加载远程数据

    复制代码
    $("#c01-select").select2({
      ajax: {
        url: "data.json",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term,
          };
        },
        processResults: function (data) {
          return {
            results: data
          };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; }, 
      minimumInputLength: 1,
      templateResult: formatRepo, 
      templateSelection: formatRepoSelection 
    });
    复制代码

    说明:

         1.q: params.term 查询参数(params.term表示输入框中内容,q发生到服务器的参数名;所以这里你可以添加自定义参数,如:stype:'person')

         2.processResults中results: data返回数据(返回最终数据给results,如果我的数据在data.res下,则返回data.res。这个与服务器返回json有关)

         3.minimumInputLength 最小需要输入多少个字符才进行查询,与之相关的maximumSelectionLength表示最大输入限制。

         4.escapeMarkup字符转义处理

         5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里,当然你可以return repo.text+"1";等

         6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

         7.关于返回的 json的格式:select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}],新版严格要求这样的格式,当然你可以添加列,如:[{id:1,text:'text',name:'liu'}]

    五.获取选中项

    复制代码
    var res=$("#c01-select").select2("data")[0] ; //单选
    var reslist=$("#c01-select").select2("data");    //多选
    if(res==undefined)
    {
         alert("你没有选中任何项");
    }
    if(reslist.length)
    {
         alert("你选中任何项");
    }
    复制代码

    六.清空选择项和设置不可用

    复制代码
    //清空选择
    $("#c01-select").val(null).trigger("change");
    $("#c01-select").val("你的placeholder").trigger("change");//或者
    //如果你使用的是input标签(默认就是本地数据),你可以用$("#c01-select").val('');来清空选项
    //disabled
    $("#c01-select").prop("disabled", false);//可用
    $("#c01-select").prop("disabled", true);//不可用
    复制代码

    七.启用多选

    $("#c01-select").select2({
      data:data,
      multiple: true
    });

    多选演示:

    由于博客系统原因只能演示选择

    八.下面简单说明新版与老版对比

    1.结果回调和选中回调名称:formatResult、formatSelection(老版);templateResult、templateSelection(新版)

    2.初始化:

    复制代码
    //老版,注意如果初始化时文本框中本身没有值(为空),则不会触发该方法
    initSelection: function (element, callback) {
       var id = $(element).val();
       var data = { id: id, text: id};//这里是初始化的数据,你可以通过id来从服务器上获取(ajax),再装载进去
       callback(data);
    }
    复制代码
    //新版,直接给select添加option
    $("#id").append(new Option("Jquery", 10001, false, true));
    //或者
    $("#id").append("<option value='10001'>Jquery</option>");

    3.获取或设置值:select2("val")(老版);$("select").val()(新版)

    推荐使用

    var res = $("#id").select2("data");
    //返回数组,单选就取res[0];好处是不进可以获取id、text还可以获取其他属性,如res[0].names

    4.停用或启用:$("select").enable(false);(老版);$("select").prop("disabled", true);(新版)

    5.主题样式:新版的样式已经更新,但如果想使用老版样式则可以设置 theme: "classic"

    Select2控件介绍

    这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://select2.github.io/,具体的使用案例,可以参考地址:https://select2.github.io/examples.html

    我们在整个框架里面,用到了很多Select2控件来处理内容的显示,包括单选的下拉列表(包括级联选择框)、复选的下拉列表、树形下拉列表等方式,界面效果如下所示。

    1)编辑界面下的省份、城市、所在行政区的级联界面效果,选择省份,会加载对应省份下的城市,选择城市,会继续加载城市下的行政区,从而实现多级关联的下拉列表效果。

    2)编辑界面下的多项选择下拉列表

    但我们选择其中的内容的时候,系统自动显示出没有选择的列表数据,非常直观友好,如下所示。

    3)树形列表的下拉列表

    有时候,我们的一些数据可能有层次关系的,如所属机构、上层列表等等。

    2、Select2控件的实际使用代码分析

    1)基础界面代码及操作

    使用select2控件,一般是在常规的select控件上,设置一下即可(设置它的class为select2)。

    复制代码
     <div class="col-md-6">
        <div class="form-group">
            <label class="control-label col-md-4">重要级别</label>
            <div class="col-md-8">
                <select id="Importance" name="Importance" class="form-control select2" placeholder="重要级别..."></select>
            </div>
        </div>
    </div>
     <div class="col-md-6">
        <div class="form-group">
            <label class="control-label col-md-4">认可程度</label>
            <div class="col-md-8">
                <select id="Recognition" name="Recognition" class="form-control select2" placeholder="认可程度..."></select>
            </div>
        </div>
    </div>
    复制代码

    如果是固定列表,那么也就是设置它的Option内容即可,如下所示。

    复制代码
     <div class="col-md-6">
        <div class="form-group">
            <label class="control-label col-md-4">吸烟</label>
            <div class="col-md-8">
                <select id="Smoking" name="Smoking" type="text" class="form-control select2" placeholder="吸烟...">
                    <option>吸烟</option>
                    <option>不吸烟</option>
                </select>
            </div>
        </div>
    </div>
    复制代码

    简单的select2控件初始化代码如下所示。

    $(document).ready(function() {
      $(".js-example-basic-single").select2();
    });

    一般情况下,如果允许复选多个项目,那么设置 multiple="multiple"即可,如下代码所示。

     <select id="ResponseDemand" name="ResponseDemand" multiple="multiple" class="form-control select2"></select>

    2)异步数据绑定操作

    一般情况下,我们的select控件的数据,是从数据库里面动态加载的,因此一般是通过Ajax方式获取数据并进行绑定即可。

    基于代码可重用性的考虑,我们编写一个公用的JS函数,用来减少绑定操作的代码,提高代码重用性。

    复制代码
    //绑定字典内容到指定的Select控件
    function BindSelect(ctrlName, url) {
        var control = $('#' + ctrlName);
        //设置Select2的处理
        control.select2({
            allowClear: true,
            formatResult: formatResult,
            formatSelection: formatSelection,
            escapeMarkup: function (m) {
                return m;
            }
        });
    
        //绑定Ajax的内容
        $.getJSON(url, function (data) {
            control.empty();//清空下拉框
            $.each(data, function (i, item) {
                control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>");
            });
        });
    }
    复制代码

    这样,绑定公用字典模块的数据,也就可以通过下面进一步封装处理即可。

    //绑定字典内容到指定的控件
    function BindDictItem(ctrlName, dictTypeName) {
        var url = '/DictData/GetDictJson?dictTypeName=' + encodeURI(dictTypeName);
        BindSelect(ctrlName, url);
    }

    这样我们初始化Select2 控件,并动态绑定对应的字典值或者其他数据,则可以通过下面初始化代码即可实现。其中BindDictItem就是直接绑定字典内容的操作,BindSelect则是根据URL进行数据的获取并绑定,而$("#Province").on("change", function (e) {});这样的函数处理,就是处理选择内容变化的联动操作了。

    复制代码
            //初始化字典信息(下拉列表)
            function InitDictItem() {
                //部分赋值参考            
                BindDictItem("Area","市场分区");
                BindDictItem("Industry", "客户行业");
                BindDictItem("Grade","客户级别");
                BindDictItem("CustomerType", "客户类型");
                BindDictItem("Source", "客户来源");
                BindDictItem("CreditStatus", "信用等级");
                BindDictItem("Stage","客户阶段");
                BindDictItem("Status", "客户状态");
                BindDictItem("Importance",  "重要级别");     
                
                // 绑定省份、城市、行政区(联动处理)
                BindSelect("Province", "/Province/GetAllProvinceNameDictJson");
                $("#Province").on("change", function (e) {
                    var provinceName = $("#Province").val();
                    BindSelect("City", "/City/GetCitysByProvinceNameDictJson?provinceName="+ provinceName);
                });
    
                $("#City").on("change", function (e) {
                    var cityName = $("#City").val();
                    BindSelect("District", "/District/GetDistrictByCityNameDictJson?cityName="+ cityName);
                });
            }
    复制代码

    而其中MVC控制器返回的数据,我们是返回一个JSON数据列表给前端页面的,他们的数据格式如下所示。

    [ { "Text": "", "Value": "" }, { "Text": "学术会议", "Value": "学术会议" }, { "Text": "朋友介绍", "Value": "朋友介绍" }, { "Text": "广告媒体", "Value": "广告媒体" } ]

    这样前端页面绑定Select2控件的时候,就使用了JSON对象的属性即可。

    复制代码
        //绑定Ajax的内容
        $.getJSON(url, function (data) {
            control.empty();//清空下拉框
            $.each(data, function (i, item) {
                control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>");
            });
        });
    复制代码

    控制器的实现代码如下:

    复制代码
            /// <summary>
            /// 根据字典类型获取对应的字典数据,方便UI控件的绑定
            /// </summary>
            /// <param name="dictTypeName">字典类型名称</param>
            /// <returns></returns>
            public ActionResult GetDictJson(string dictTypeName)
            {
                List<CListItem> treeList = new List<CListItem>();
                CListItem pNode = new CListItem("", "");
                treeList.Insert(0, pNode);
    
                Dictionary<string, string> dict = BLLFactory<DictData>.Instance.GetDictByDictType(dictTypeName);
                foreach (string key in dict.Keys)
                {
                    treeList.Add(new CListItem(key, dict[key]));
                }
                return ToJsonContent(treeList);
            }
    复制代码

    3)树形列表的绑定操作

    对于属性列表,如所属公司、所属部门机构等有层次性的数据,它的绑定操作也是类似的,如下代码所示。

    复制代码
                //绑定添加界面的公司、部门、直属经理
                BindSelect("Company_ID", "/User/GetMyCompanyDictJson?userId="+@Session["UserId"]);
                $("#Company_ID").on("change", function (e) {
                    var companyid = $("#Company_ID").val();
                    BindSelect("Dept_ID", "/User/GetDeptDictJson?parentId="+ companyid);
                });
                $("#Dept_ID").on("change", function (e) {
                    var deptid = $("#Dept_ID").val();
                    BindSelect("PID", "/User/GetUserDictJson?deptId="+ deptid);
                });
    复制代码

    只是它们返回的数据,我们把它作为有缩进的显示内容而已。

    [ { "Text": "爱奇迪集团", "Value": "1" }, { "Text": " 广州分公司", "Value": "3" }, { "Text": " 上海分公司", "Value": "4" }, { "Text": " 北京分公司", "Value": "5" } ]

    或者如下所示

    [ { "Text": "广州分公司", "Value": "3" }, { "Text": "总经办", "Value": "6" }, { "Text": "财务部", "Value": "7" }, { "Text": "工程部", "Value": "8" }, { "Text": "产品研发部", "Value": "9" }, { "Text": "  开发一组", "Value": "14" }, { "Text": "  开发二组", "Value": "15" }, { "Text": "  测试组", "Value": "16" }, { "Text": "市场部", "Value": "10" }, { "Text": "  市场一部", "Value": "23" }, { "Text": "  市场二部", "Value": "24" }, { "Text": "综合部", "Value": "11" }, { "Text": "生产部", "Value": "12" }, { "Text": "人力资源部", "Value": "13" } ]

    综上两个部分,我们可以看到它们的Text的内容,是根据层次关系进行空格增加,从而实现了层次关系的显示。

    不过从这个界面效果上讲,这样的处理确实没有EasyUI里面,对下拉列表树的展示好看,也许可以利用更好的Bootstrap插件进行这个树形内容的展示。

      

    4)select2控件的赋值处理

    上面介绍的方法,都是介绍select2控件的初始化,绑定相关的数据,那么如果初始化界面后,我们绑定编辑界面的值的时候,就需要赋值给控件,让它显示真正需要显示的项目了。

    如清空控件的方法如下所示。

                //清空Select2控件的值
                $("#PID").select2("val", "");
                $("#Company_ID").select2("val", "");
                $("#Dept_ID").select2("val", "");

    如果对于多个控件,需要清除,则可以使用集合进行处理

                var select2Ctrl = ["Area","Industry","Grade","CustomerType","Source","CreditStatus","Stage","Status","Importance"];
                $.each(select2Ctrl, function (i, item) {
                    var ctrl = $("#" + item);
                    ctrl.select2("val", "");
                });

    给Select2 控件赋值,让它显示对应值内容的项目,那么操作也就和上面的类似了。

                     $("#CustomerType").select2("val", info.CustomerType);
                     $("#Grade").select2("val", info.Grade);
                     $("#CreditStatus").select2("val", info.CreditStatus);
                     $("#Importance").select2("val", info.Importance);
                     $("#IsPublic").select2("val", info.IsPublic);

    如果需要级联显示的,那么做法增加一个onchange的函数处理就可以了,如下级联代码的赋值处理如下。

    复制代码
     $("#Province").select2("val", info.Province);
     $("#Province").trigger('change');//联动
     $("#City").select2("val", info.City);
     $("#City").trigger('change');//联动
     $("#District").select2("val", info.District);
     
    $("#Company_ID1").select2("val", info.Company_ID);
    $("#Company_ID1").trigger('change');
    $("#Dept_ID1").select2("val", info.Dept_ID);
    $("#Dept_ID1").trigger('change');
    $("#PID1").select2("val", info.PID);
    复制代码

    多个列表项目数据的绑定。

    我们从案例里面可以看到,Select2支持多项值的选择,它们保存后会以逗号分开,如果我们需要在编辑的时候显示存储的多个记录,那么需要把字符串转换为数组列表才能进行正确绑定,如下所示。

    $("#Permission").select2("val", info.Permission.split(','));

    最后来两个整体性的界面效果,供参考。

     


    点关注,不迷路

    文章每周持续更新,可以微信搜索「 十分钟学编程 」第一时间阅读和催更,如果这个文章写得还不错,觉得有点东西的话 ~求点赞👍 求关注❤️ 求分享❤️ 
    各位的支持和认可,就是我创作的最大动力,我们下篇文章见!

    展开全文
  • select2的单选框置

    千次阅读 2018-10-15 11:30:48
    $('#payItype').select2('val',null); 或$('#payItype').val(null); 有用点个赞~

    $('#payItype').select2('val',null);

    或$('#payItype').val(null);

     

    有用点个赞~

    展开全文
  • select2 使用详解

    万次阅读 2016-01-26 15:01:28
    构造函数:2.5.2版本:(具体详见http://select2.github.io/select2/#documentation)参数类型描述Width字符串控制宽度样式属性的Select2容器divminimumInputLengthint最小数量的字符maximumInputLengthint最大数量...

    构造函数:

    2.5.2版本:(具体详见 http://select2.github.io/select2/#documentation 
     
     

    参数

    类型

    描述

    Width

    字符串

    控制 宽度 样式属性的Select2容器div

    minimumInputLength

    int

    最小数量的字符

    maximumInputLength

    int

    最大数量的字符

    minimumResultsForSearch

    Int

    最小数量的结果

    maximumSelectionSize

    int

    可选择的最大条目数

    placeholder

    字符串

    选择初始值

    separator

    字符串

    分隔符字符或字符串用来划定id

    allowClear

    布尔

    此选项只指定占位符

    multiple

    布尔

    Select2是否允许选择多个值

    openOnEnter

     

    打开下拉如果设置为true,当用户按下回车键,Select2关闭。 默认情况下启用这个选项。

    id

    函数

    函数用于获取id从选择对象或字符串id存储代表的关键

    matcher

    函数

    用于确定是否搜索词匹配一个选项时使用一个内置的查询功能

    sortResults

    函数

    用于排序列表搜索之前显示的结果。

    formatSelection

    函数

    函数用于呈现当前的选择

    formatResult

    函数

    函数用来渲染结果,

    formatResultCssClass

    函数

    函数用于添加css类结果元素

    formatNoMatches

    字符串/函数

    字符串包含“不匹配”消息,或 
    函数用于呈现信息

    formatSearching

    字符串/函数

    字符串包含“搜索… “消息,或 
    函数用于呈现显示的消息 正在进行搜索。

    formatAjaxError

    字符串/函数

    字符串包含消息“加载失败”,或 
    函数用于呈现信息

    formatInputTooShort

    字符串/函数

    包含“搜索”输入太短消息的字符串,或 
    函数用于呈现信息。

    formatInputTooLong

    字符串/函数

    包含“搜索”输入太短消息的字符串,或 
    函数用于呈现信息

    formatInputTooLong

    字符串/函数

    包含“搜索输入字符串太长”消息,或 
    函数用于呈现信息。

    formatSelectionTooBig

    字符串/函数

    字符串包含“你不能选择任何更多的选择”消息,或 
    函数用于呈现信息

    formatLoadMore

    字符串/函数

    字符串/函数

    createSearchChoice

    函数

    创建一个新的可选选择从用户的搜索词。 允许创建通过查询选择不可用 功能。 有用的用户可以创建动态的选择时,如“标签”usecase。

    createSearchChoicePosition

    函数/字符串

    定义的位置插入元素

    initSelection

    函数

    调用Select2创建允许用户初始化选择的值 select2附加到元素

    tokenizer

    函数

    记号赋予器函数可以处理后输入搜索框的输入每一个按键和提取 并选择选择。

    tokenSeparators

    函数

    一个字符串数组定义标记为默认的分隔符 分词器 功能。 默认情况下,此选项设置为一个空数组标记这意味着使用默认 编译器是禁用的。 通常是明智的,设置该选项值相似 [',',' '] 。

    query

    函数

    函数用于搜索词的查询结果。

    ajax

    对象

    选择内置的ajax查询功能。 这个对象作为快捷方式有手动编写一个函数,执行ajax请求。内置函数支持更高级的特性,比如节流和无序的反应。

    data

    数组/对象

    择建在查询功能,使用数组。

    tags

    数组/函数

    将Select2放入“标签'mode,用户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是一个 数组 或者一个函数 返回一个数组的对象 或 字符串 。如果字符串而不是使用对象,他们将有一个被转换成一个对象 id 和 文本 属性相等 的值 字符串 。

    containerCss

    函数/对象

    内联css将被添加到select2的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。

    containerCssClass

    函数/字符串

    Css类将被添加到select2容器的标签。

    dropdownCss

    函数/对象

    内联css将被添加到select2下拉的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。

    dropdownCssClass

    函数/字符串

    Css类将被添加到select2下拉的容器。

    dropdownAutoWidth

    布尔

    当设置为 真正的 尝试自动尺寸下拉基于内容的宽度。

    adaptContainerCssClass

    函数

    过滤器/重命名的css类,因为他们被复制从源标签select2容器标签

    adaptDropdownCssClass

    函数

    滤器/重命名的css类,因为他们被复制从源标签select2拉标签

    escapeMarkup

    函数

    函数用于后处理标记从格式化程序返回功能。 默认情况下这个功能转义的html实体,以防止javascript注入。

    selectOnBlur

    布尔

    设置为 真正的 如果你想要Select2选择当前高亮选项时模糊。

    loadMorePadding

    整数

    定义了多少像素需要加载下一页前折以下。 默认值是 0 这意味着结果列表需要滚动到下一个页面的底部加载的结果。 这个选项可以用来触发加载更快,可能导致更流畅的用户体验。

    nextSearchTerm

    函数

    函数用于确定下一个搜索词应该是什么

      


    Example Code(针对目标元素为 div 例如:<div id="e1">...</div> )

    1. $("#e1").select2(); 
    2. $("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 获取选中的ID值
    3. $("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 选中(好像单个还不行,以数组形式才行)
    4. $("#el").click(function() { $("#e2").select2("val", ""); });  // 不选中任何值
    5. $("#e1").click(function () { var data = $("#e2").select2("data"); }); // 获取选中对象
    6. $("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });
    7. $("#e1").click(function () { $("#e2").select2("open"); }); // 打开下拉框
    8. $("#e1").click(function () { $("#e2").select2("close"); }); // 关闭下拉框
    9. $("#e1").select2({placeholder: "Select a state"});  // 下拉框 提示
    10. $("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 获取选中的ID值
    11. $("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });   // id="CA",id="MA" 选中
    12. $("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 获取选中JSON对象
    13. $("#e1").click(function () { $("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });
    // 加载数据
    $("#e11").select2({
    placeholder: "Select report type",
    allowClear: true,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
    });
    // 加载数组  支持多选
    $("#e11_2").select2({
        createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} },
        multiple: true,
        data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
    });
    function log(e) {
        var e=$("<li>"+e+"</li>");
        $("#events_11").append(e);
        e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); });
    }

     
    // 对元素 进行事件注册
     
    $("#e11")
    .on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })  // 改变事件
    .on("select2-opening", function() { log("opening"); })  // select2 打开中事件
    .on("select2-open", function() { log("open"); })     // select2 打开事件
    .on("select2-close", function() { log("close"); })  // select2 关闭事件
    .on("select2-highlight", function(e) { log ("highlighted val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 高亮
    .on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 选中事件
    .on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 移除中事件
    .on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 移除完毕事件
    .on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");})  // 加载中事件
    .on("select2-focus", function(e) { log ("focus");})    //  获得焦点事件
    .on("select2-blur", function(e) { log ("blur");});     //  失去焦点事件
    $("#e11").click(function() { $("#e11").val(["AK","CO"]).trigger("change"); });
     
     

     

     

     

    展开全文
  • 今天做select的时候,页面要求为:载入默认选项框为空白,点击下拉框显示正常选项。 找了半天 有两种办法,一种纯css...select id="abc" &gt; &lt;option &gt;1&lt;/option&gt; ...

    今天做select的时候,页面要求为:载入默认选项框为空白,点击下拉框显示正常选项。 

    找了半天  有两种办法,一种纯css实现,一种借助js实现。

    先说js的办法吧。

    html:

    <body οnlοad="load()">
        <select id="abc" >        
            <option >1</option>    
            <option >2</option>        
            <option >3</option>        
            <option >4</option>     
        </select>
    </body>

    js:

    <script>  
    function load()  
    {  
        var x = document.getElementById("abc");  
        x.selectedIndex = -1;  
    }  
    </script> 
    实测成功。



    纯css的方法:

    <option selected="selected" disabled="disabled"  style='display: none' value=''></option>
    上面的option置于第一行即可。





    展开全文
  • Select2学习总结

    万次阅读 2017-12-12 11:56:14
    本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、分组显示、按照拼音搜索功能。并通过测试示例对其效果进行了验证。 一、效果图 二、 使用方式 1.使用前需要引入下面几个插件: ...
  • select2如何设置默认空值

    万次阅读 2017-07-22 11:14:06
    1、问题背景 select2搜索下拉框,当满足某种条件时,让它默认选中空值2、问题原因 select2默认选择空值 $(function(){ $("#selectNull").select2(); $("#selectNull").on("select2:select",...
  • select2使用

    千次阅读 2018-07-26 11:48:01
    select2使用 一、简介  select2是Jquery用来代替选择框的一种组件。它让你可以定制下拉框,并且支持搜索、标记,远程数据源,无限滚动和其他更高级的功能。select2的下载地址为:https://select2.github.io/ 。...
  • select2下拉框总结

    万次阅读 2017-06-06 11:56:05
    用了这么久的Select2插件,也该写篇文章总结总结。 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本。 官网:http://select2.github.io/...
  • 经过网上咨询、请教同事后,得到一致意见是使用select2。下面是使用select2的初始化、动态赋值,实现标签化多选、以及遇到的问题:1,从http://select2.github.io/examples.html处下载select2源码,把dist目录中css...
  • select2 api 使用教程(全)

    万次阅读 2017-01-24 17:00:15
    前段时间使用了Select2控件处理下拉菜单,搞了一整天才搞明白,记录下心得。参考官网http://ivaynberg.github.io/select2/#documentation 该控件我使用了两种方式:1、基本用法;2、AJAX用法。 先说第一个基本用法...
  • select2参数介绍

    万次阅读 2017-06-07 10:10:56
    关于select2 api参数的文档  具体参数可以参考一下: 参数 类型 描述 Width 字符串 控制 宽度 样式属性的Select2容器div ...
  • 经过网上咨询、请教同事后,得到一致意见是使用select2。 下面是使用select2的初始化、动态赋值,实现标签化多选、以及遇到的问题: 1,从http://select2.github.io/examples.html处下载select2源码,把dist目录
  • select2清除选择,重置

    千次阅读 2019-07-23 10:58:48
    清空option并且将选中内容置 $("#specs option").remove(); $("#specs").select2(“val”, “”);
  • Select2清空选择框

    千次阅读 2018-03-07 22:00:27
    )可以将select2的选择框内的val清空,但是在页面上显示的仍然是原有的内容(998(1.1版)),并不会回到初始状态,这样看上去就不太对然后通过控制台发现选择框内的信息是显示在select2-subject-container这个id下的,在...
  • select2官网:https://select2.org/ 一、上手 1. CDN 2. 单选select 3. 多选select 4. 禁用状态 5. 宽度(width) 6. 关于选项(Options) 7. Placeholders 二、Data Sources 1. ...
  • select2如何清除选择项

    万次阅读 热门讨论 2016-11-24 08:36:15
    select2如何清除选择项
  • select2选中第一项无法显示问题

    千次阅读 2017-10-18 16:47:23
    select2
  • select into 多个值 为

    千次阅读 2016-05-17 11:04:26
    select into 为和多个值: 1、异常处理法 将 select ... into ............; 的地方改写成: begin   select ... into ............; exception  when no_data_found then  ....... end; 2、...
  • select2 修改No results found

    千次阅读 2019-08-26 14:14:52
    $("#mySelect").select2({ language: { noResults: function(params) { return "暂无数据"; } } });
  • Select2.js学习总结

    千次阅读 2018-03-10 12:10:26
    本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、按照拼音搜索功能。并通过测试示例对其效果进行了验证。一、效果图 二、 使用方式1.使用前需要引入下面几个插件: select2.css或者select2....
  • Select2下拉框联动

    千次阅读 2017-04-12 09:59:10
    <select id="officeName" name="officeName" class="form-control" onchange="changeData()"> #foreach($item in ${orgs}) $item.name"> #foreach($org in $item.subOrg) $!org.id">$!org.name #end #end ...
  • select2学习笔记

    千次阅读 2016-04-26 13:17:39
    $eventSelect = $('.select2_sample1').select2(set) 事件: //置 $eventSelect.val(null).trigger("change"); //选中 $eventSelect.on("selected", function (e) { }) //移除 $eventSelect.on(...
  • select2 api参数中文文档

    万次阅读 2017-07-31 09:01:18
    select2 api参数的文档 具体参数可以参考一下: 参数   类型   描述 Width 字符串 控制 宽度 样式属性的Select2容器div minimumInputLength ...
  • select在ios中选项空白

    千次阅读 2017-12-14 10:27:23
    出现这个问题是因为粗心吧。解决了好久。。。最后发现是个笑话。。。<select name="" id=""> ... <option value="2" label="2"> <option value="3" label="3"></option> </select>这样写在安卓上正常显示。但是在io
  • Select2 4.0.3自动补全插件使用说明

    千次阅读 2016-12-27 09:47:00
    1、我项目中使用的是Select2  4.0.3[特别需要强调的是selec2  4.0以后的版本和3.x的版本使用差距很大,具体可参见源码]   2、使用select2 插件需要引入其js和css,还有4.0以后特定转化语言的js文件 //样式   ...
  • 使用select2实现多选select下拉框

    万次阅读 2017-04-18 17:44:28
    <link type="text/css" rel="stylesheet" href="C:/Users/Administrator/Desktop/select2Demo/select2.min.css"/> <script type="text/javascript" src="C:/Users/Administrator/Desktop/select2Demo/jquery-1.7.1....
  • 为了用jquery.validate.js校验select2,折腾了2天,现在终于解决了,把方法告诉大家。   一、使用用了select2美化select     Js代码  $('select').select2();        ...
  • select2 是替代select 组件的jQuery 插件,它能给你一个自定义的列表选择组件,自定义支持如搜索、标签、远程数据集、无限滚动等及其它常用的选项。 1、安装 CDN(Content Delivery Network)方式: 另外还有安装...
  • lt;body onload="load()"...select id="abc" &gt; &lt;option &gt;1&lt;/option&gt; &lt;option &gt;2&lt;/option&gt; &lt;optio
  • html select下拉框上显示的实现方法

    千次阅读 2018-11-16 15:20:59
    html select下拉框上显示的实现方法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 483,488
精华内容 193,395
关键字:

select2空