drop-down-menu - 从 IE8 的下拉列表中显示/隐藏选定的选项不起作用

Question

我正在尝试在 Dropdownlist 上做一个显示/隐藏机制。这种情况是，一旦从下拉列表中选择了该值，则该值在第二个下拉列表中将不再可用。

该代码适用于 Firefox，但不适用于 IE8。这是代码

<select id="dropdownone" class="" name="dropdownone">
<option selected="selected" value="">Default</option>
<option value="1">question 1?</option>
<option value="2">question 2</option>
<option value="3">question 3</option>
</select>

<select id="dropdowntwo" class="" name="dropdowntwo">
<option selected="selected" value="">Default</option>
<option value="1">question 1?</option>
<option value="2">question 2</option>
<option value="3">question 3</option>
</select>

$("#dropdownone").bind('change', function () {
            var index = this.selectedIndex;
            if (this.value != "") {
                $("#dropdowntwo option").each(function () {
                    var disabled = (this.index == index);
                    //$(this).attr("hidden", disabled);
                    if (disabled ) {
                        $(this).css('visibility', 'hidden');
                    } else {
                        $(this).show();
                    }
                });
            }
        });

Answer 1

你可以试试：

$("#dropdownone").bind('change', function () {
var firstDropDown = this.selectedIndex;

if (this.value != "") {              
    $("#dropdowntwo option").each(function () {
        if(this.index == firstDropDown) {
            $("#dropdowntwo option[value='" + firstDropDown + "']").attr("style", "visibility: hidden;");
        } else {
            $("#dropdowntwo option[value !='" + firstDropDown + "']").attr("style", "visibility: show;");
        }
    });
}
});

我已经检查过这在 IE8 中是否有效。