CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Gulaev Valentin
Gulaev Valentin

Reputation: 595

How create dynamically selectmenu in jQuery Mobile?

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

Upvotes: 3

Views: 7028

Answers (3)

Wasim A.
Wasim A.

Reputation: 9886

this one works for me

$(document).on('change', "body", function(){
    $( ".ui-selectmenu" ).selectmenu();
});

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

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.

Upvotes: 9

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

Worth noting that this should also work: (example appends two options to show how to add options.

$('<select name="sl" id="sl" data-native-menu="false"><option value="clear">That I got</option></select>').appendTo("#output");
$('<option value="clear2">Another That I got</option>').appendTo("#sl");
$('select').selectmenu();

Upvotes: 0

Related Questions