如何在 jQuery Mobile 中动态创建选择菜单？答案

【问题标题】：How create dynamically selectmenu in jQuery Mobile?如何在 jQuery Mobile 中动态创建选择菜单？
【发布时间】：2017-12-18 20:52:02
【问题描述】：

我正在尝试动态创建一个select 元素，但它不是由 jQuery Mobile 设计的。实现这一目标的正确方法是什么？

JSFiddle

【问题讨论】：

标签： javascript jquery html css jquery-mobile

【解决方案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();
});

也看看这个ARTICLE，你会发现增强jQuery元素标记的不同方法，或者可以找到HERE。 p>

【讨论】：

首先 trigger('create') 用于重建整个内容。您应该像我的示例中那样使用适当的功能。并且在使用 jQuery 时不要使用 vanila javascript。
好建议。为什么 $('select').selectmenu();工作和不工作 $('#id_select').selectmenu()?
你可以使用 $('#select-choice-1').selectmenu();它会工作得很好。这个例子是在另一个答案中创建的，尽可能简单。

【解决方案2】：

值得注意的是，这也应该有效：（示例附加两个选项以显示如何添加选项。

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

【讨论】：

【解决方案3】：

这个对我有用

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

【讨论】：