Question

我遇到了这个代码的问题：

$(function(){
    function typeHTML() {
                var types = ['text', 'image', 'select'];
                var result = '<select>';
                for (var i = 0; i < types.length; i++) {
                    result += '<option value="' + types[i] + '">' + types[i] + '</option>';
                }
                result += '</select>';
                return result;
            }
for (var i = 0; i < 5; i++) {
                            $('#my-table').append('<tr><td>' + i + '</td><td><input type="text" value="' + i + '"/></td><td>' + typeHTML() + '</td><td><input type="text"/></td><td><input type="text"/>,<input type="text"/></td></tr>');
}
});

请在此处查看jsfiddle：http://jsfiddle.net/D659E/

您可以看到typeHTML（）是一个函数，它使用types [i]构建一个元素作为每个选项的内部文本。但是当我追加它时，HTML就会出现：

<select>
    <option value="text"></option>
    text
    <option value="image"></option>
    image
    <option value="select"></option>
    select
</select>

其中应该是选项内部文本的types[i]被移到选项之外。为什么会这样？当我记录附加的HTML时，它看起来是正确的，因此在append()调用本身中出现此问题。我正在使用jQuery 1.9.1。

Answer 1

您正在关闭该选项两次：

result += '<option value="' + types[i] + '"/>' + types[i] + '</option>';

所以，将其更改为

result += '<option value="' + types[i] + '">' + types[i] + '</option>';

为什么.append（）搞砸了我的<option>元素？</option>

1 个答案: