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

score 9 · Accepted Answer · edited May 23 '17 at 12:16

9

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.

edited May 23 '17 at 12:16

Community

1
1

answered Mar 25 '13 at 09:08

Gajotres

57,309
16
102
130

First of all trigger('create') is used to rebuild whole content. You should use appropriate function like in my example. And don't use vanila javascript while working with jQuery. – Gajotres Mar 25 '13 at 10:53
Good advise. Why $('select').selectmenu(); worked and don't work $('#id_select').selectmenu()? – Gulaev Valentin Mar 26 '13 at 10:35
You can use $('#select-choice-1').selectmenu(); it will work just fine. This example was created in the other answer to be as simple as possible. – Gajotres Mar 26 '13 at 10:40

score 0 · Answer 2 · answered Jun 07 '13 at 00:03

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();

score 0 · Answer 3 · edited Apr 24 '16 at 11:03

0

this one works for me

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

edited Apr 24 '16 at 11:03

Tunaki

132,869
46
340
423

answered Apr 24 '16 at 09:41

Wasim A.

9,660
22
90
120

How create dynamically selectmenu in jQuery Mobile?

3 Answers3