隐藏/显示在ie8中不工作

Hide/Show is not working in IE 8

本文关键字：工作 ie8 显示 隐藏      更新时间：2023-09-26

我有两个下拉列表。基于第一个下拉值，隐藏第二个下拉值。但是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版本。

我认为你需要根据最新的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>

你的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开始支持以下函数

相关文章：