下拉列表更改功能在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());
        });

請參考鏈接查看演示

希望對您有幫助。