下拉列表更改功能在IE9中不起作用

Question

我有两个下拉菜单，第二个下拉菜单在第一个下拉菜单中进行了更改时将发生变化，这在Firefox中工作正常，但在IE中却没有。 （IE9）。 然后在第二个下拉菜单中，我遍历所有项目，并隐藏其中的一些项目。

var intermin = '${intermin}'; 
var intermin2=intermin.substring(1,3);

$('#startSemester').change(function() {

    var start=$('#startSemester').val();
    var end=$('#endSemester').val();
    var start1=start.substring(0,1);
    var start2=start.substring(1,3);
    var start3="";
    var end3="";
    if (start1=="H"){
        start3="2";
    }
    else
        start3="1";
    var start4=start2+start3;

    $('#endSemester option').removeAttr("disabled");
    var endSemesters= $('#endSemester');

        $.each($('option', endSemesters), function(index, value) { 
            var end= ($(this).val());
            var end2=end.substring(1,3);
            var end1=end.substring(0,1);
            if (end1=="H"){
                end3="2";
            }
            else
                end3="1";
            var end4=end2+end3;
            $('#endSemester ' + 'option' + '[value =' + end + ']').show();  
            if (end4 < start4 || end2 > intermin2) {
                $('#endSemester ' + 'option' + '[value =' + end + ']').hide();
            }
        });
});

是否有某种方式可以在IE中正常工作。

Answer 1

IE的问题是隐藏选项部分。 IE在选项元素上不支持太多CSS。 特别是display: none .hide()不会执行任何操作。

因此，我认为最好禁用该选项。

var changeOption = $('#endSemester ' + 'option' + '[value=' + end + ']');

changeOption.prop("disabled", false);
if (parseInt(end4) < parseInt(start4) || parseInt(end2) > parseInt(intermin2)) {
    changeOption.prop("disabled", true);
}

您可以在各种浏览器中对此进行测试： http : //jsfiddle.net/tive/wU6XL/

或者，如果您足够坚持，请找到一个插件，该插件可以：

• 隐藏select控件并使用替换ul li结构
• 包裹物<option />用跨度（ demo1的 DEMO2 ）

PS：您可能需要相应地更改选项值，因为我无法查看您的HTML。

Answer 2

嘿，请参考此代码

<asp:DropDownList ID="ddlWeeklyWeightIn" runat="server" ClientIDMode="Predictable">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
        </asp:DropDownList>

Js代码是

$('#ddlWeeklyWeightIn').on("change", function () {
            alert($(this).val());
        });

请参考链接查看演示

希望对您有帮助。