javascript - 在添加选项后选择出现问题

Question

我正在使用 PHP 即时创建一个 select 下拉列表来获取数据并构建选项。然后我使用 Ajax 来获取它(使用以下几行)并添加一个附加选项。

所有这些都按预期工作，我唯一的问题是，在下拉列表中，它总是选择第二个选项，这是我的 PHP/Ajax 调用中的第一个选项，但不是我之前添加的选项。

我还尝试将 selected 更改为 selected='selected' 但这没有什么区别。

我在这里做错了什么，或者如何在 jQuery/JS 中更改它，以便它选择前置选项？

注意:我在 Bootstrap 3 模式中使用它。

我的 JS(缩短):

var levelMain = $(this).closest('tr').find('.levelMain').text();
// ...
$.ajax({
    url: 'ajax.php?node=fetchNav1',
    cache: false,
    error:function(err) {
        alert(err.statusText);
    },
    success:function(html) {
        $('#divLevelMain').html(html);
        $("#levelMain").prepend("<option value='' selected>" + levelMain + "</option>");
    }
});

选择是一个标准的 HTML 选择，如下所示:

<select class="form-control" id="levelMain">
    <option value="some value">some text</option>
    // ...
</select>

Answer 1

您确定取消选择该选择标记中的所有其他选项吗？

$('#levelMain').children('option').removeAttr('selected');
$('$levelMain').prepend("<option...</option>");

或者您可能应该在附加后添加选定的属性，以确保它在 DOM 中正确更新

var element = $("<option...</option>");
$('$levelMain').prepend(element);
$('#levelMain').children('option').removeAttr('selected');
element.attr('selected','selected');

因为浏览器将默认选择第一个，然后当您添加它时，它将保持选中状态，因此将选择第二个而不是第一个。