一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery 表单下拉框(select)美化增加强版示例

时间:2014-10-13 编辑:简简单单 来源:一聚教程网

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

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

1、Select2绑定事件

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

 代码如下 复制代码
 $("#selectsq").select2();
    $("#selectsq").on("change", function (e) { ToggleProductList();})

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

IT分享Jquery select美化增加版Select2使用

 代码如下 复制代码

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=""就行

 代码如下 复制代码

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 + '    ';
                        });
                        $("#selectsq").append(html);
                    }
                    else {
                        alert("加载数据失败!"); return;
                    }
                }
            },
            complete: function (XMLHttpRequest, textStatus) {
            },
            error: function (e) {
                alert("加载数据错误!"); return;
            }
        });
}

热门栏目