Обновить несколько избранных списков с таким же именем класса

Question

У меня есть три разных selectlists с тем же именем класса. Каждый SelectList содержит два варианта:

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

На странице INIT, я предваряя каждый SelectList с новой опцией, как это:

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

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

Когда я отладки с Firebug, я могу видеть в HTML, что новый параметр был добавлен во всех трех избранных списках, но ни один из избранных списков не был обновлен, поэтому я не вижу новый параметр.

Я думаю, что я делаю что-то не так в javascript, но я не уверен, что. Кстати, я использую jQuery Mobile.

Answer 1

Попробуйте это:

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

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