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>");
    }
});

Select是标准的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');

因为浏览器将默认为所选的第一个，然后当你预先设置它将保持选中状态，因此第二个将被选中而不是第一个。

Answer 2

使用以下内容更新selectedIndex元素的<select>应该非常简单：

success:function(html) {
    $('#divLevelMain').html(html);
    $("#levelMain").prepend("<option value=''>" + levelMain + "</option>");
    $("#levelMain")[0].selectedIndex = 0;
}

在前置选项后选择问题

2 个答案: