невозможно установить html-контент в пользовательской функции jQuery

Question

У меня есть функция jQuery под названием "bindServingSizes", которую я называю вот так

$(servingsizes).bindServingSizes(ingredientid);

Где «сервировка» - это действующий элемент управления раскрывающегося списка.

jQuery.fn.bindServingSizes = function(ingredientid) {

    $.getJSON("/serving_sizes?ingredientid=" + ingredientid, function(j) {

        var options = "<option value=''>Please select a serving size</option>";
        for (var i=0; i < j.length; i++)
          options += '<option value="' + j[i].serving_size.id + '">' + j[i].serving_size.name + '</option>';

        $(this).html(options);
    });
  };

Я получаю данные обратно с сервера и могу видеть, что находится в переменной «options», отображая их на странице. Тем не менее, я не могу установить содержание HTML для элемента. Чего мне не хватать?

Спасибо

Answer 1

Когда вы звоните $(this), вы звоните $.getJSON объекту. Добавьте вне него немного var container = $('containerId'); и выполните conainer.html(opions);

Answer 2

Проблема в том, что $ (this) в вашей функции обратного вызова из $ .getJSON больше не является окном выбора. Попробуйте это, создавая переменную, которая хранит ссылку на поле выбора.

jQuery.fn.bindServingSizes = function(ingredientid) {
    var $this = $(this);

    $.getJSON("/serving_sizes?ingredientid=" + ingredientid, function(j) {

        var options = "<option value=''>Please select a serving size</option>";
        for (var i=0; i < j.length; i++)
          options += '<option value="' + j[i].serving_size.id + '">' + j[i].serving_size.name + '</option>';

        $this.html(options);
    });
  };