在Jquery Mobile中执行selectmenu（＆＃34; refresh＆＃34;）时，Dynimcally创建的Select选项会复制自身

Question

我正在使用JSON数组动态创建select选项（Drop-down）。它正在创建一个选择选项，其中还有另一个选择选项。

我在html中创建了 选择 ，并在我的JavaScript中使用了相同的内容。创建 选项 并附加到 选择

<div  id="state-template" style="display: none">

    <div id="state-container">

        <label class="state-select-label"></label>

        <select name="state-select" id="state-select"></select>

    </div>

</div>

JavaScript代码段是，

$.each(StatesArray, function (stateIndex, stateItem){

    $("#state-select").append($("<option></option>").attr("value", stateIndex).text(""+stateItem.StateName));


});

$("#state-select").selectmenu().selectmenu("refresh");

它正在创建一个带有内部下拉列表的下拉列表，这是一个重复项。内部下拉列表列出了状态列表。

跟随Stackoverflow中的许多线程，但没有做到这一点。

下面是渲染的元素结构图像和屏幕中的选择选项。

Inspect Element - Select option

Answer 1

试试这个：

var append_data;
$.each(StatesArray, function (stateIndex, stateItem){

    append_data+= '<option value='"+stateIndex+"'>'"+stateItem.StateName+"'</option>';

});

$("#state-select").append(append_data);