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结构
使用范围demo1 demo2）

<option />

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 Code Is

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

请参阅链接See Demo

希望它对你有所帮助。

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

2 个答案: