Refresh multiple selectlists with same class name

Question

I have three different selectlists with the same class name. Each selectlist contains two options:

<select class="select-tasks" multiple="multiple" name="SelectedTasks">
   <option>Option 1</option>
   <option>Option 2</option>
</select>    

At page init, I'm prepending each selectlist with a new option like this:

    $("#page").one("pageinit", function () {
         $(".select-tasks").prepend("<option>Choose an option</option>");

         $(".select-tasks").each(function (i, obj) {
              $(this).selectmenu("refresh", true);
         });
    });

When I'm debugging with Firebug, I can see in the HTML that the new option has been added in all three selectlists, but none of the selectlists has been refreshed, so I can't see the new option.

I guess I'm doing something wrong in the javascript, but I'm not sure what. By the way, I'm using jQuery Mobile.

Answer 1

Try this:

$("#page").one("pageinit", function () {

     $(".select-tasks").each(function (i, obj) {
          $(this).prepend("<option>Choose an option</option>")
                 .selectmenu("refresh", true);
     });
});