Question

这是我的代码的一部分：

$.post('category.php',{datatosend : datatosend},result);

function result(data) {
    $('#placeHolder').append('<select onchange="loadcats();" id="categoryPID" name="categoryPID" >').append(data).append('</select>');  
    alert($('#placeHolder').html());
    });
}

我想让这个HTML保持警惕：

<select onchange="loadcats();" id="categoryPID" name="categoryPID">
<option value="37">computer</option><option value="38">mobile</option>
</select>

但结果是：

<select onchange="loadcats();" id="categoryPID" name="categoryPID"></select>
<option value="37">computer</option><option value="38">mobile</option>

为什么以及我该怎么办？！感谢。

Answer 1

这出现了很多，这是由于对.append()函数的作用有误解。人们似乎认为它与将HTML字符串连接到所选元素的innerHTML属性相同，但事实并非如此。

.append()函数适用于实际的DOM元素。如果传入一个字符串，那么它会将其解析为HTML，创建元素，然后将它们附加到所选元素。所以当你这样做时：

$('#placeHolder').append('<select onchange="loadcats();" id="categoryPID" name="categoryPID" >')

它会创建整个<select>元素（它并不关心您是否关闭了标记，它是否为您完成），然后将其附加到#placeHolder。然后，当您致电.append(data)时，它会再次创建选项元素，然后在<select> 之后附加。

最好的想法是分别创建<select>元素，将<option>元素添加到该元素，然后将其附加到#placeHolder：

// create the entire <select> element var select = $('<select onchange="loadcats();" id="categoryPID" name="categoryPID" >'); // append the <option> elements to it select.append(data); // append the <select> to #placeHolder $('#placeHolder').append(select); // then finally alert its HTML alert($('#placeHolder').html());

实际上可以将这些调用中的大多数链接起来，但我只是为了说明正在发生的事情而将其拆分。链式版本看起来像这样：

alert($('#placeHolder').append($('<select onchange="loadcats();" id="categoryPID" name="categoryPID" >').append(data)).html());

Answer 2

试试这个：

$('#placeHolder').append('<select onchange="loadcats();" id="categoryPID" name="categoryPID" >');
$('#categoryPID').append(data);

在jQuery中运行代码的顺序

2 个答案: