unable to set the html content in a custom jQuery function
<p>I have a jQuery function called "bindServingSizes" which I call like this</p>

<pre><code>$(servingsizes).bindServingSizes(ingredientid);
</code></pre>

<p>Where "servingsizes" is a valid drop down list control. </p>

<pre><code>jQuery.fn.bindServingSizes = function(ingredientid) {

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

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

        $(this).html(options);
    });
  };
</code></pre>

<p>I do get data back from the server and I am able to see what is in the "options" variable by displaying it on the page. However, I am not able to set the html contents to the element. What could I be missing?</p>

<p>Thanks</p>
