<option> 中的选定属性更改后，<select> 窗口未更新答案

【问题标题】：<select> window not updating after change in selected attribute in <option><option> 中的选定属性更改后，<select> 窗口未更新
【发布时间】：2012-05-26 07:10:50
【问题描述】：

我正在创建的注册表单在选择下拉列表中有商业和住宅选项。

根据活动页面类型，我更改了默认选择的选项。

这是html：

<select class="type_c" name="type_c">  // default selected is business
    <option value="Business" selected="selected">Business</option>
    <option value="Residential">Residential</option>
</select>

这是我在每个页面的页脚中运行以更改这些值的代码：

$(function(){

    var pageType = getPageType(); // returns either 'Business' or 'Residential'

    $('.type_c option').each(function(){
        $(this).removeAttr('selected');
    });

    $('.type_c option').each(function(){
        if($(this).html() == pageType)
            $(this).attr('selected','selected')
    });

});

问题在于，当它在“住宅”页面上时，在 DOM 中选择了“住宅”选项，但在视觉上，选择了“商业”选项！

谢谢。

【问题讨论】：

进行了编辑以注意这仅在 Firefox 中发生。我在想它总是在发生。

标签： jquery html firefox

【解决方案1】：

因为这是在初始值之后更改属性，从技术上讲，它是一个属性，您应该使用$(this).prop() 而不是$(this).attr()。

另外，尝试将值设置为 true 而不是 selected

$(this).prop('selected',true);

或者，您也可以设置select 元素的值：

$('.type_c').val(pageType);

【讨论】：

实施您的建议后，html 显示未选择
可能是 JQuery 版本。我忘记了他们何时添加.prop()
对于更高版本的 jQuery，我们需要 prop() 而不是 attr()！很好的收获。

【解决方案2】：

我会验证您返回的内容是否正确评估。我使用以下代码制作了一个空白 HTML 页面。您可以看到所选选项的呈现方式不同，具体取决于您将“pageType”设置为的字符串。

<html>

<head>
<script type="text/javascript" src="json2.min.js"> </script>
<script type="text/javascript" src="jquery-1.7.2.min.js"> </script>
<script type="text/javascript" src="jquery.cookie.js"> </script>
</head>

<script>
$(function(){

    var pageType = 'Residential'; // returns either 'Business' or 'Residential'

    $('.type_c option').each(function(){
        $(this).removeAttr('selected');
    });

    $('.type_c option').each(function(){
        if($(this).html() == pageType)
            $(this).attr('selected','selected')
    });

});

</script>

<body>

<select class="type_c" name="type_c">  // default selected is business
    <option value="Business" selected="selected">Business</option>
    <option value="Residential">Residential</option>
</select>



</body>
</html>

【讨论】：

我已经确认我有正确的输出。正如我所提到的，这个问题只存在于 Firefox，它在其他浏览器中完美显示。

【解决方案3】：

我以前也遇到过这样的事情。 Firefox 喜欢保存表单元素的状态，因此当页面重新加载时，它会显示上次会话的选择，即使它是通过 JavaScript 更改的。通常我必须从头开始加载页面（我转到 url 并按回车，而不是重新加载）。

我不确定这是否会有所帮助，但过去我也遇到过这种情况。

（我创建了第二个答案，因为这完全不同。）

【讨论】：

【解决方案4】：

如果有人和我有同样的问题，我认为是 JQuery 版本。比如这个：

var SetValue = function(dropDownElement, valueToSet){
 dropDownElement.after("<br> Set to: "+valueToSet);
 dropDownElement.find("option").removeAttr("selected");
 unitsTypeControl.find("option").filter(function() {
     return this.text === valueToSet;
 }).attr('selected', true);
}

https://codepen.io/RolandoRetana/pen/GQrByQ

在 IE 上运行，但在 Chrome 上不可用，升级到最新版本的 jquery 后，两者都运行。

【讨论】：