Question

我的表格中有一个元素。

<select name="states" disabled="disabled" size="10" id="select-states"><optgroup label="Choose State &raquo;&nbsp;">Choose State</optgroup></select>

我想用从AJAX收到的新<select>替换上面的select元素。

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    success: function(msg){
        if(msg == 0) {
            //Query returned empty.
        } else {
            //Query Has values.
            $('#select-states').html(msg);
        }
    }
});

例如上面的Ajax请求给了我以下HTML。

<select name="states" size="10" id="select-states">
    <optgroup label="Choose State">Choose State</optgroup>
    <option value="36">First State</option>
    <option value="37">Second State</option>
    <option value="38">Third State</option>
    <option value="39">Fourth State</option>
</select>

语法$('#select-states').html(msg);似乎没有在<select>元素中正确替换内容。但是，如果我用div替换它，它可以正常工作。这是替换<select>元素

的正确语法

Answer 1

你很亲密。只需更改此行：

$('#select-states').html(msg);

要：

$('#select-states').replaceWith(msg);

你现在拥有它的方式它会将你的新选择插入旧的选择中你会得到一些奇怪的html，其中两个元素具有相同的id并且直接在另一个内部选择，例如：

<select name="states" disabled="disabled" size="10" id="select-states">
    <select name="states" size="10" id="select-states">
        <optgroup label="Choose State">Choose State</optgroup>
        <option value="36">First State</option>
        <option value="37">Second State</option>
        <option value="38">Third State</option>
        <option value="39">Fourth State</option>
    </select>
</select>

Answer 2

我认为您可以使用replaceWith()，例如：

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    success: function(msg){
        if(msg == 0) {
            //Query returned empty.
        } else {
            //Query Has values.
            $('#select-states').replaceWith(msg);
        }
    }
});

您现在拥有的代码是在旧版本的中插入新的select元素，这将无效。

另一种选择是将select元素包装在容器中，并设置容器的内容，如：

<div id="selectContainer"> <select name="states" disabled="disabled" size="10" id="select-states"></select> </div> $.ajax({ type: 'POST', url: 'process.php', data: 'countryId='+countryId, success: function(msg){ if(msg == 0) { //Query returned empty. } else { //Query Has values. $('#selectContainer').html(msg); } } });

Answer 3

理想情况下，您可以做的只是替换<option/>中的<select>。

Answer 4

.html()将替换该项目的内容（<optgroup>和<option>元素）。这可能会导致<select><select>...</select></select>。你真的想要.replaceWith()。

顺便说一句，您可能只是通过检查DOM来使用Firefox的Firebug或Chrome的Inspector来解决这个问题。

此外，有时，当您在表单输入上执行此类手术时，输入将不会与表单重新关联，因此在您提交时其参数将丢失。（这在旧版Internet Explorer中尤其如此）。因此，可以帮助手动将基础元素与表单重新关联，例如$('form#myform').get(0).selectState = $('#select-states').get(0);

当然，如果你真的只想改变选择的内容，你可能应该这样做，而不是搞乱整个输入。这也将避免形式重新关联问题。

如何使用jquery？</select>替换此<select>元素

4 个答案: