jQuery动态添加选择答案

【问题标题】：jQuery dynamic added selectjQuery动态添加选择
【发布时间】：2013-12-10 03:10:43
【问题描述】：

当我通过克隆将选择动态添加到 DIV 时，我无法从新的下拉列表中选择任何内容，有什么想法吗？

$(".inline-form .copyIng:first-child").clone().appendTo(".inline-form");

看到这个：http://jsfiddle.net/rxwL6/

.trigger("refresh"); Dosen't change anything, I still can't select anything from the new dropdown.

【问题讨论】：

标签： jquery jquery-mobile select clone

【解决方案1】：

问题是您正在克隆已经被 jQM “增强”的 html 内容，而不是原始标记。因此 jQM 不知道如何创建或刷新它。

相反，如果您提前知道标记，只需像这样插入它：

$(document).on("pageinit", function () {
    $("#newIng").click(function () {
        var tocopy = $('<div class="copyIng"><div class="left"><input type="text" name="m" placeholder="Some text" /></div> <div class="ingDiv"><select size="1" name="c"><option value="">No 1</option><option value="">No 2</option><option value="">No 3</option></select></div></div>');       
        $(".inline-form").append(tocopy);
        $(".copyIng").trigger("create");
    });
});

这是您更新的FIDDLE

更新：来自评论。 OP 有兴趣克隆下拉列表中的选项列表，因此不必每次都从数据库中检索它们。这是获取选项列表并将其插入到附加的新文本中的示例：

$(document).on("pageinit", function () {
    $("#newIng").click(function () {
        var optList = $(".ingDiv select").eq(0).html();                
        var tocopy = $('<div class="copyIng"><div class="left"><input type="text" name="m" placeholder="Some text" /></div> <div class="ingDiv"><select size="1" name="c">' + optList + '</select></div></div>');      
        $(".inline-form").append(tocopy);
        $(".copyIng").trigger("create");
    });
});

更新FIDDLE

【讨论】：

很好，但是选择列表很长，并且由数据库中的 PHP 填充，那我该怎么做呢？我不想每次创建新的下拉菜单时都从 DB 调用结果。
您可以只克隆选项列表并仍然使用我的技术：jsfiddle.net/ezanker/rxwL6/21