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

Drop down list change function not working in IE9

本文关键字：工作 IE9 功能 下拉列表      更新时间：2023-09-26

我有两个下拉菜单，当第一个下拉菜单发生变化时，第二个下拉菜单会改变，这在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.

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结构
  • 用span (demo1 demo2)包装<option />

PS:你可能想要改变选项值，因为我没有在你的HTML视图。

请参阅此代码

<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());
        });

请参考链接参见Demo

希望对你有帮助。

相关文章：