附加选项后选择问题

Posted 2023-04-13

【中文标题】附加选项后选择问题

【英文标题】：Issue with Select after prepending option

【发布时间】：2014-08-15 18:07:22

【问题描述】：

我正在使用 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>

【问题讨论】：

你有没有尝试$("#levelMain").val(levelMain)前置后？

【参考方案1】：

使用以下内容更新<select> 元素的selectedIndex 应该很容易：

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

【讨论】：

也谢谢你！只是为了检查一下，最后一行在这里是否与其他答案所暗示的一样？这样看起来更短。

@user2571510 是的，不要乱用selected 属性，您可以更改整个selectedIndex，它应该可以正常工作。

谢谢你 - 我决定按照提供的解释使用这个。效果很好！

【参考方案2】：

您是否确保取消选择该 Select 标记中的所有其他选项？

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

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

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

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

【讨论】：

谢谢！我决定按照提供的解释采用另一种方法，但这也适用于我。