Question

我有两个下拉菜单。根据第一个下拉值，隐藏第二个下拉值。但是hide（）和show（）在IE 8中不起作用。但在Firefox中工作正常。

代码：

<script type="text/javascript">
function marketcd_dropdown_const(){
    alert($("#first").val());
    switch ($("#first").val())
    {

        case 'ONE':
            $('.market_code_dropdown').hide();  
            $('.instorder').hide();  
            $('#all_option').prop('selected',true);
            break;

        case 'TWO':
            $('.market_code_dropdown').hide();
            $('.instorder').hide();  
            $('#all_option').prop('selected',true);
            break;

        default:
            $('.market_code_dropdown').show();
            $('.instorder').show();  
            $('#all_option').prop('selected',true);
            break;

    }
}

$(document).ready(function(){
    alert("ready function");
    $(document).bind('change', ".first_class", marketcd_dropdown_const);
    });
</script>

JSP：

<SELECT NAME=BillingSystem id="first" class="first_class" size="1" onchange="nuvoxcolumn(this);" >

                  <!-- // Option All  -->
                  <option value=<%= m_strALL %>

            <%
                if (m_bGet || m_strOldBillingSystem.equals("%"))
                    {%>
               <%= m_selected %>
            <%}
            %>
            >
         <%= m_strAllSearch %>
            <%Log.write("m_strAllSearch for billing system: "+m_strAllSearch); %>
         </option>


         <%
                while(m_strBillSystemList[iCount] != null)

                    {
                        String strBillSystem = m_strBillSystemList[iCount];
         %>
         <OPTION VALUE=<%= strBillSystem %>
         <%Log.write("m_strOldBillingSystem: "+m_strOldBillingSystem); %>
               <%
                        if (m_strOldBillingSystem != null)
                            {
                                if (m_strOldBillingSystem.equals(strBillSystem))
                                    {%>

                     <%= m_selected %>
                  <%}
                            }
                  %> >
            <%= strBillSystem %>
            <%Log.write("strBillSystem: "+strBillSystem); %>
            </option>
            <%
                        iCount++;
                    }
            %>

            </select>

<SELECT NAME=MarketCode id="second" size = 1>

           <!--   // Option All   -->




                  <option id="all_option" value=<%= m_strALL %>

               <%
                if (m_bGet || m_strOldMarketCode.equals("%"))
                    {%>
                  <%= m_selected %>
               <%}
               %> >
               <%= m_strAllSearch %>
               <%Log.write("m_strAllSearch for market code: "+m_strAllSearch); %>
               </option>

            <%
                while(m_strMktCodeList[iCount] != null)
                    {
                        String strMktCode = m_strMktCodeList[iCount];


            %>

            <OPTION class="market_code_dropdown" VALUE=<%= strMktCode %>
                 <%
                        if (m_strOldMarketCode != null)
                            {
                                if (m_strOldMarketCode.equals(strMktCode))
                                    {%>
                        <%= m_selected %>
                    <%}
                            }
                    %> >


               <%= strMktCode %> 
                  <%Log.write("strMktCode: "+strMktCode); %>



               </option>
               <%
                        iCount++;
                    }
               %> 
               </select>

使用的Jquery版本：jQuery v1.4.2 后来，我使用了最新的jquery版本。两者都不在IE 8中工作。

Answer 1

我认为您需要根据最新的jQuery版本更改代码......

$(document).ready(function(){
    alert("ready function");
    $(document).on('change', ".first_class", marketcd_dropdown_const);
    });

或者您可以使用jQuery迁移插件来支持旧版本代码

我运行此代码并且它正在运行...只需检查它..

<script type="text/javascript">
function marketcd_dropdown_const(){
    alert($("#first").val());
    switch ($("#first").val())
    {

        case 'ONE':
            $('.market_code_dropdown').hide();  
           // $('.instorder').hide();  
           // $('#all_option').prop('selected',true);
            break;

        case 'TWO':
            $('.market_code_dropdown').hide();
        //    $('.instorder').hide();  
         //   $('#all_option').prop('selected',true);
            break;

        default:
            $('.market_code_dropdown').show();
         //   $('.instorder').show();  
        //    $('#all_option').prop('selected',true);
            break;

    }
}

$(document).ready(function(){
    alert("ready function");
    $(document).bind('change', ".first_class", marketcd_dropdown_const);
    });
</script>
<body>
<SELECT NAME=BillingSystem id="first" class="first_class" size="1"   >

                  <!-- // Option All  -->
                  <option value=""  >Select</option>
                  <option value="ONE"  >test</option>



         <OPTION VALUE='TWO'>test1 </option>

            </select>

<SELECT NAME="MarketCode" id="second" size = "1" class="market_code_dropdown">

          <option value=""  >test</option>



         <OPTION VALUE='tt'>test1 </option>
               </select>
</body>

使用此javascript版本...

<script type="text/javascript">
function marketcd_dropdown_const(obj){

    switch (obj.value)
    {

        case 'ONE':
           document.getElementById('second').style.display = 'none';
           // $('.instorder').hide();  
           // $('#all_option').prop('selected',true);
            break;

        case 'TWO':
            document.getElementById('second').style.display = 'none';
        //    $('.instorder').hide();  
         //   $('#all_option').prop('selected',true);
            break;

        default:
            document.getElementById('second').style.display = 'block';
         //   $('.instorder').show();  
        //    $('#all_option').prop('selected',true);
            break;

    }
}


</script>
<body>
<SELECT NAME=BillingSystem id="first" class="first_class" size="1" onChange=" marketcd_dropdown_const(this)"  >

                  <!-- // Option All  -->
                  <option value=""  >Select</option>
                  <option value="ONE"  >test</option>



         <OPTION VALUE='TWO'>test1 </option>

            </select>

<SELECT NAME="MarketCode"  id="second" size = "1" class="market_code_dropdown">

          <option value=""  >test</option>



         <OPTION VALUE='tt'>test1 </option>
               </select>
</body>

Answer 2

您的JQuery版本不是最新的，这是我认为的主要问题。

可能有一个解决问题的解决方法，但老实说，尝试让旧版本工作只是一个持续的头痛。

这是我的解决方案，适用于您

在你的css中创建一个新类：

.hideme { display: none; }

现在，而不是

$('.market_code_dropdown').hide();
$('.market_code_dropdown').show();

使用

$('.market_code_dropdown').addClass('hideme');
$('.market_code_dropdown').removeClass('hideme');

自v.1.4起支持函数

隐藏/显示在IE 8中不起作用

2 个答案: