javascript - 通过javascript在表中动态添加 "select"和 "default Text"

Question

如何使用 javascript 和 JSON 在动态表中添加动态下拉选择(设置默认选择!)。

我想向表格中的每一行添加许多选择(下拉列表)，并在选择中设置默认文本。该表是使用 javascript 附加创建的，并具有使用 Jquery 从 JSON 文件导入的动态内容。

我可以成功导入所有内容，但是下拉列表无法设置选定的。如果你们能帮助我选择下拉菜单，我将不胜感激。非常感谢!

<script type="text/javascript">
...
$(target).append("<tr style='height:150px'>" +
                        "<td><input type='checkbox'></td>" +
                        "<td>pics</td>" +
                        "<td>" + menuItemName + "</td>" +
                        "<td id='"+menuItemId+"'>" +
                        "</td>" +
                        "<td class='menuItemPrice'>" + menuData.Categories[c].Items[i].Price + "</td>" +
                        "<td>mount</td>" +
                        "</tr>"
                    );
...

for (var o = 0; o < menuData.Categories[c].Items[i].Options.length; o++) {
    var inputs = {isFirst:   firstOption,
                 optionId:   menuData.Categories[c].Items[i].Options[o].MenuItemOptionId,
                 optionName: menuData.Categories[c].Items[i].Options[o].MenuItemOptionName,
                 price:      menuData.Categories[c].Items[i].Options[o].Price
                 };
    $('#'+menuItemId).append("<div><select"+
                                "<option value='1'>small</option>" +
                                "<option value='2'>mid</option>" +
                                "<option value='3'>big</option>" +
                                "<option value='4'>very big</option>"+
                                "</select></div>"

                            );

这里我想设置默认Select但是无法成功，请帮帮我，谢谢!

$('#'+menuItemId).children(':selected').text(inputs.optionName);//here just can show the last size.

HTML

...
<tbody id="sortable">

Answer 1

首先，您的 select 标记没有右尖括号 (>)，因此 HTML 格式不正确。应该是这样的:

$('#'+menuItemId).append("<div><select>"+

其次，您应该使用 find 而不是 children，因为您要查找的是选择器标识的元素下方的多个级别，如下所示:

$('#'+menuItemId).find(':selected').text(optionName);

这是一个工作示例:https://jsfiddle.net/tLddsL2p/1/