Question

我试图附加一个附加行的表。除了select选项之外，它会正确追加。我追加的jquery是：

$("#add_item").click(function(){
        $( "#itemlist" ).append( "\
            <tr id='add_item'>\
                <td class='add_item_strip'></td>\
                <td><input type='checkbox' value='1'/></td>\
                <td><input placeholder='Qty' class='qty' type='text'/></td>\
                <td>\
                    <select class='form-control type'/>\
                        <option value='service'>Service</option>\
                        <option value='hours'>Hours</option>\
                        <option value='days'>Days</option>\
                        <option value='product'>Product</option>\
                    </select>\
                </td>\
                <td><input placeholder='Name' class='name' type='text'/></td>\
                <td><input placeholder='Description' class='description'/></td>\
                <td><input placeholder='Price' type='text' class='price'/></td>\
                <th><input type='checkbox' value='7'/></th>\
                <td></td>\
                <td><input placeholder='Total' class='subtotal' type='text'/></td>\
            </tr>\
            <tr class='edit_table_space'>\
            </tr>\
        " );
    });

浏览器检查器中的html显示了select标签中的选项，如下所示：

<select class="form-control type"></select>

<option value="service"></option>

<option value="hours"></option>

<option value="days"></option>

<option value="product"></option>

任何想法为什么？

Answer 1

问题是您过早关闭<select>标记：

<select class='form-control type'/>
---------------------------------^

/>立即关闭代码。试试这个：

...
<select class='form-control type'>\
    <option value='service'>Service</option>\
    <option value='hours'>Hours</option>\
    <option value='days'>Days</option>\
    <option value='product'>Product</option>\
</select>
...

Answer 2

尝试删除＆＃39; /＆＃39;在开幕式结束时＆＃34; SELECT＆＃34;标签

另外，请考虑将这么多内容附加到内联可能会使未来的代码管理变得困难。尝试依靠像handlebars.js这样的模板系统

使用选择选项字段附加表单

2 个答案: