如何在jQuery Mobile中动态创建下拉菜单？

Question

我正在尝试动态创建一个元素，但它没有被jQuery Mobile样式化。有什么正确的方法可以实现这一点吗？ JSFiddle

- Gulaev Valentin

Answer 1

以下是一个可运行的jsFiddle示例: 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();
});

请参考这篇文章，在那里您将找到不同的增强jQuery元素标记的方法。此外，可以在此处找到更多信息。

- Gajotres

---

首先，trigger('create') 用于重新构建整个内容。您应该像我示例中那样使用适当的函数。在使用 jQuery 时不要使用原始 JavaScript。 - Gajotres

好的建议。为什么 $('select').selectmenu(); 起作用而 $('#id_select').selectmenu() 不起作用？ - Gulaev Valentin

你可以使用 $('#select-choice-1').selectmenu(); 它能正常工作。这个例子是为了尽可能简单而在其他回答中创建的。 - Gajotres

Answer 2

这个对我有效

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

- Wasim A.

Answer 3

值得注意的是，这也可以工作：（示例附加了两个选项以显示如何添加选项。）

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

- Mark Schultheiss