Question

我正在构建以下jQuery插件：

(function( $ ) {
    $.fn.showSelectList = function (options) {
        return this.each(function () {
            /// Create the select element
            var select = document.createElement('select');
            select.className = "form-control input-sm";

            $(this).append(select);

            if (options)
                $(select).loadSelectListOptions(options);
        });
    }

    $.fn.loadSelectListOptions = function (options) {
        return this.each(function () {
            var htmlOptions = '';

            for (var i = 0; i < options.length; i++) {
                htmlOptions += '<option value="' + options[i].value + '">' + options[i].name + '</option>';
            }

            $(this).html = htmlOptions;
        });
    }

    $.fn.helloWorld = function () {
        var opt = [];

        for (var i = 0; i < 10; i++) {
            var option = { 'value': i, 'name': 'testname' + i };
            opt.push(option);
        }

        return this.each(function () {
            $(this).showSelectList(opt);
        });
    };
}( jQuery ));

我可以正确加载selectList，但无论我做什么，我都无法使用selectList调用加载loadSelectListOptions选项。处理调用，但其中的$（this）不指向创建的selectList，而是指向其他内容。结果是我总是空selectList。

Answer 1

.html()是一个函数，因此您需要将选项列表作为参数传递

$(this).html(htmlOptions);

演示：Fiddle

由于集合中的所有元素都有相同的选项列表，因此可以使用

$.fn.loadSelectListOptions = function (options) {
    var htmlOptions = '';

    for (var i = 0; i < options.length; i++) {
        htmlOptions += '<option value="' + options[i].value + '">' + options[i].name + '</option>';
    }
    return this.html(htmlOptions);
}

演示：Fiddle

Answer 2

$（this）里面并没有指向创建的selectList，而是指向其他东西。

是 - $(this)在您的selectList周围创建一个jQuery包装器，并在其上分配.html属性无效。你想要的是

this.innerHtml = htmlOptions;

或

$(this).html(htmlOptions);

然而更好

$.fn.loadSelectListOptions = function (options) {
    return this.each(function() {
        for (var i = 0; i < options.length; i++)
            this.add(new Option(options[i].value, options[i].name));
    });
}

或

$.fn.loadSelectListOptions = function (options) {
    return this.each(function() {
        var $this = $(this);
        for (var i = 0; i < options.length; i++)
            $this.append(new Option(options[i].value, options[i].name));
    });
}

从另一个方法调用方法时jQuery插件（这个）混乱

2 个答案: