Question

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

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

这是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中选择了“住宅”选项，但在视觉上，选择了“商家”选项！

感谢。

Answer 1

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

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

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

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

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

Answer 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>

Answer 3

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

我不确定这是否会有所帮助，但过去曾发生在我身上。

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

Answer 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

在升级到最新版本的jquery之后，适用于IE但不适用于Chrome，它适用于两者。

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

4 个答案: