html选择即使在选择集合之后也不显示所选内容

Question

我有一个国家下拉列表，我将所选属性设置为US。我可以清楚地在firebug中看到select="selected"进入select OPTION，其值为US。但firefox和chrome都没有显示US为选中状态。我有populate&选定的国家如下。

var countryData = getCountryData();
var html = '<option value="">Select Country</option>'; 
$.each(countryData, function(key,value) {
    if(defaultValue == value.id)
    {
        html = html + '<option value="'+value.id+'" selected="selected">'+value.name+'</option>';
    }
    else
    {
        html = html + '<option value="'+value.id+'">'+value.name+'</option>';
    }
});
countryField.html(html);

如果由于任何原因，浏览器确实有可能不显示所选属性，即使我们设置了所选属性。

更新：好的，伙计们，正如我所期望的，它一定与其他代码相冲突。事实就是这样。我正在使用bootstrapValidator和一个特殊的调用"resetForm"来执行此行为。然而有一件事我不明白为什么html选择仍然在firebug中显示所选属性？但最后我把这个代码放在了resetForm调用之后。感谢大家的建议&帮助

Answer 1

我遇到了一个特殊的问题，即多选不选择所选的值。我最终做的是用JS选择它们（我的应用程序中有jQuery，这样更容易），如下所示：

$('#select_element').find('option[selected="selected"]').each(function(){
    $(this).prop('selected', true);
});

我知道这很丑陋，应该避免，但如果什么都不起作用，这就会起作用。

Answer 2

您不需要设置selected="selected"，selected本身就是足够的

<option value="anything" selected>anything</option>

还要检查您的HTML标记是否正确。您正在关闭<option> with </value>。它是错误的，应该是<option></option>

编辑

如果上述解决方案不起作用，您可以通过JavaScript:进行设置

document.getElementById("idOfSelect").selectedIndex = "1";//index starts from 0

Answer 3

这对我有效，但你可以试试这个：

countryField.html(html).trigger('change');

Answer 4

您不需要selected="selected"，只需要value.id+'selected>'+。。。也不应该最后，检查

defaultValue == value.id

在调试器中。

Answer 5

我也遇到过类似的问题，但在我的情况下，它不是JS，但另一个选项的GET变量值与一个选项名称匹配，这不起作用。

因此：https://example.com?section=instruments&instruments=0失败。重命名为唯一的名称为我修复了它。