现在位置首页 / 项目实战 /正文

Jquery select美化增加版Select2使用

作者: IT小兵 | 2014年10月13日| 热度:℃ | 评论: |参与:

在前几篇中有分享Jquery Select2的文章,Select2是一个基于jQuery的替代选择框。 它支持搜索、远程数据集和无限滚动的结果。

[Jquery 下拉框美化自动补齐分组插件-Select2最新版使用说明]

[jquery 可编辑的下拉框(select)修改完善版]

今天继续分享一下Select2的使用。

1、Select2绑定事件

主要能用到事件有select数据绑定时、打开时、关闭时。

    $("#selectsq").select2();
    $("#selectsq").on("change", function (e) { ToggleProductList();})

在ToggleProductList函数中,可以判断是否选择正确的数据:

function Getselect2ID(idd) {
    var data = $("#" + idd).select2("data");
    var datastring = "";
    $.each(data, function (key, val) {
        datastring = datastring + val.id + ",";
    });
    return datastring;
}
function ToggleProductList() {
    var sqlist = Getselect2ID("selectsq");
    if (sqlist.length > 0) { 
        $("#divselectProduct").show();
      
    }
    else {
        $("#divselectProduct").hide();
    }
}

var data = $("#" + idd).select2("data")是获取select选中的数据

2、支持多选

类似上面图示的多tags选择,只要定义属性multiple=""就行

             <select multiple="" name="selectsq" id="selectsq" style="width:300px" class="populate select2-offscreen" tabindex="-1">

3、动态绑定数据,这个可以采用获取数据,组织html的方式,也可以采用Select2自带的ajax方式获取。

function GetCityData() {  
        var cityId = GetCity(); 
        $.ajax({
            type: "post",
            dataType: 'json',
            url: ajaxUrl,
            data: { 
                Operate: "searchcitydata",
                txtsqname: $("#txtsqname").val(),
                txtspname: $("#txtspname").val(),
                txtsjname: $("#txtsjname").val(),
                CityId: cityId
            },
            success: function (data, textStatus) {
                if (data != null) {
                    var model = eval(data);
                    if (model != null && model != "undefined") {
                        //selectsq
                        var html = '';
                        $.each(model.ListSQ, function (key, val) {
                             
                            html = html + '    <option value="' + val.Id + '">' + val.Name + '</option>';
                        });
                        $("#selectsq").append(html); 
                    }
                    else {
                        alert("加载数据失败!"); return;
                    }
                }
            },
            complete: function (XMLHttpRequest, textStatus) {
            },
            error: function (e) {
                alert("加载数据错误!"); return;
            }
        });
}

其他更多方法,参考:http://ivaynberg.github.io/select2/#events

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询