How create dynamically selectmenu in jQuery Mobile?

Question

I am trying to dynamically create a select element, but it isn't styled by jQuery Mobile. What is the correct way to achieve this?

JSFiddle

Answer 1

Here's a working jsFiddle example: http://jsfiddle.net/Gajotres/dEXac/

$(document).on('pagebeforeshow', '#index', function(){    
    // Add a new select element    
    $('<select>').attr({'name':'select-choice-1','id':'select-choice-1'}).appendTo('[data-role="content"]');
    $('<option>').attr({'value':'1'}).html('Value 1').appendTo('#select-choice-1');
    $('<option>').attr({'value':'2'}).html('Value 2').appendTo('#select-choice-1');    
    // Enhance new select element
    $('select').selectmenu();
});

Also take a look at this ARTICLE, there you will find different method of enhancing jQuery elements markup, or it can be found HERE.