一次调用一个元素上的自定义函数

Question

我有一个jQuery扩展方法，可以根据this回答创建自定义动画下拉列表选择列表。在具有一个下拉列表的页面上使用此方法可以完美地运行：

扩展方法如下：

$.fn.extend({
    slidingSelect: function (options) {
        var select = $(this);
        var selector = select.selector;

        var width = $(selector).width();

        var selectedValue = select.val();

        if (selectedValue === "undefined")
            selectedValue = select.find("option:first").val();

        console.log($(selector + " option:selected").text());

        var divToggle = $("<div class='SelectorToggle SelectorToggle-defualt'>" + $(selector + " option:selected").text() + "<button style='float: right; width: 20px' id='ddlImgBtn'></button></div>")
                        .attr({ id: select.attr("id") + "Toggle" })
                        .css({ width: select.width() + 20 })
                        .click(function () {
                            $(selector + "Toggle").toggleClass("SelectorToggle-defualt");
                            $(selector + "Toggle").toggleClass("SelectorToggle-pressed");
                            $(selector).slideToggle("fast");
                        }).insertBefore(select);

        var optionCount = $(selector + " option").length;

        if (optionCount < 5) {
            select.attr("size", optionCount);
        }
        else {
            select.attr("size", 5);
        }

        select.addClass("drop-down-selector");

        $(selector).css({ 'width': select.width() + 20, 'position': 'absolute', "z-index": '9999' });

        select.change(function () {
            divToggle.html($(selector + " option:selected").text() + "<button style='float: right; width: 20px' id='ddlImgBtn'></button>");
            $(selector + "Toggle").toggleClass("SelectorToggle-defualt");
            $(selector + "Toggle").toggleClass("SelectorToggle-pressed");
            $(selector).slideToggle("fast");
        });
    }
});

我称之为：

 $("#LanguageSelector").hide().slidingSelect();

然而，我遇到了无数问题，让它在具有多个下拉菜单的页面上工作。我的下拉列表是作为具有服务器端处理的DataTable解决方案的一部分动态创建的。页脚的下拉：

如果我打电话给以下人员：

$("select").hide().slidingSelect();

然后以某种方式页面上的所有下拉菜单都会创建自定义控件：

如果我尝试单独调用每个元素的扩展方法：

$("select").hide().each(function(index) {
    $(this).slidingSelect();
});

我还尝试在创建下拉菜单时单独调用扩展方法（仅针对其中一个）：

$('#RelatedCasesGrid tfoot th').each(function () {

    var col = $(this).html();

    //..........

    else if (col === "ComplaintTypeName") {
        $(this).html(GetDropDownInput(col, caseId));
        var element = $(this).find("select");
        element.hide().slidingSelect();
    }

方法GetDropDownInput(col, caseId)按以下方式创建下拉列表：

function GetDropDownInput(col, id) {

    var control;

    $.ajax({
        method: "GET",
        dataType: "json",
        async: false,
        url: "/OATS/Api/GetColumnItems/" + id + "?column=" + col
    }).done(function (data) {
        control = "<select  id='selector' class='table-filter-input-drop-down-list'><option value='' disabled selected>Filter by</option>"

        for (var i = 0; i < data.length; i++) {

            control += "<option col-type=" + data[i].Type + " value='" + data[i].Name + "'";

            if (data[i].Selected) {
                control += "selected='selected'";
            }

            control += ">" + data[i].Name + "</option>";
        }

        control += "</select>";
    });

    return control;
}

结果：

Answer 1

来自：http://www.w3schools.com

  

id属性指定HTML元素的唯一ID（值   在HTML文档中必须是唯一的。）

但是你的ajax方法为所有选择创建了相同的id：＆＃34; selector＆＃34;。更改此方法以创建唯一ID（＆＃39; col＆＃39;参数的值似乎可以用于此目的），然后调用：

$("#your_unique_id").hide().slidingSelect();