這個jquery驗證碼有什麼問題？

代碼應該在頁面加載時隱藏文本框，並且僅當用戶選擇「其他」時才使其可見。這個jquery驗證碼有什麼問題？

<script type="text/javascript"> 
     $(document).ready(function() { 
     $('#ddlMajor').change(function() { 
     if ($(this).val() == 'Other') { 
       //    $('#txtOther').show(); 
     $('#txtOther').css('display', 'inline'); 
     } 
     else { 
       //    $('#txtOther').hide(); 
     $('#txtOther').css('display', 'block'); 
     } 

     }); 

}); 
</script> 

<asp:TextBox runat="server" ID="txtOther" style="display:none;" > </asp:TextBox> 

<asp:DropDownList runat="server" ID="ddlMajor"> 
       <asp:ListItem Value="Accounting">Accounting</asp:ListItem> 
       <asp:ListItem Value="Management">Management</asp:ListItem> 
       <asp:ListItem Value="Other">Other</asp:ListItem> 
</asp:DropDownList>

來源

2011-10-18 SmilingLily

目前它做什麼？ –

你可以顯示由asp.net代碼生成的HTML嗎？ –

我不認爲您在ASP中設置的ID：dropdownList與生成的HTML中生成的ID相同。當你使用Firebug或IE調試器等工具查看時，你會得到什麼？ –

當您使用服務器端控件時，ID將被重新呈現。你可以把代碼塊在你的JavaScript，但我會建議使用一個類來代替：

<asp:TextBox runat="server" ID="txtOther" style="display:none;" CssClass="txtOther"> </asp:TextBox> 

<asp:DropDownList runat="server" ID="ddlMajor" CssClass="ddlMajor"> 
       <asp:ListItem Value="Accounting">Accounting</asp:ListItem> 
       <asp:ListItem Value="Management">Management</asp:ListItem> 
       <asp:ListItem Value="Other">Other</asp:ListItem> 
</asp:DropDownList> 

$('.ddlMajor').change(function() { 
... 
});

我也相信你的CSS display值不正確。試試這個：

$(document).ready(function() { 
     $('.ddlMajor').change(function() { 
     if ($(this).val() == 'Other') { 
     $('.txtOther').css('display', 'block'); 
     } 
     else { 
     $('.txtOther').css('display', 'none'); 
     } 

     });

或者，如果你不想改變的標記，使用ClientID。注意：此當您一定包含在.aspx文件中的JavaScript

$(document).ready(function() { 
     $('#<%= ddlMajor.ClientID %>').change(function() { 
     if ($(this).val() == 'Other') { 
     $('#<%= txtOther.ClientID %>').css('display', 'block'); 
     } 
     else { 
     $('#<%= txtOther.ClientID %>').css('display', 'none'); 
     } 

     });

來源

2011-10-18 14:45:44 Curt

應該使用<％= ddlMajor.ClientID％>等等，而不是使用CssClass來指向您可能需要用於應該使用的對象。 – StefanE

這是爲什麼？你有參考嗎？如果JavaScript包含在.js文件中，該怎麼辦？你會如何做到這一點？ – Curt

如果將JS從aspx文件中分離出來，您仍然可以使用JS變量來設置服務器控件的ID。我只是說，使用CssClass解決這個問題可能會在稍後需要使用CssClass達到目的時導致問題。編碼器和網頁設計師並不總是同一個人:) – StefanE

你的問題是，當你試圖隱藏文本框，您的顯示器設置爲block纔會工作。 JQuery使用顯示屬性display: none來隱藏文本框。所以你正在做的是覆蓋jQuery的隱藏。試試這個：

$(document).ready(function() { 
    $('#ddlMajor').change(function() { 
     $('#txtOther').css('display', 'inline'); 
     if ($(this).val() == 'Other') { 
      $('#txtOther').show(); 
     } else { 
      $('#txtOther').hide(); 
     } 
    }); 
});

來源

2011-10-18 14:49:49 jtfairbank

這不是唯一的問題。 jQuery不會找到任何'＃ddlMajor'元素，因爲這將重新呈現客戶端。看到我的答案。 – Curt

啊，我沒有意識到ASP會重寫id標籤。謝謝你讓我知道！ – jtfairbank

你不需要使用類作爲參考，但作爲服務器控件都會有不同的ID渲染時，你可以使用內聯（<％= ddlMajor.ClientID％>），而不是獲得正確的ID：

例如：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#<%= ddlMajor.ClientID %>").change(function() { 
     if ($(this).val() == 'Other') { 
       $('#<%= txtOther.ClientID %>').show(); 

     } 
     else { 
       $('#<%= txtOther.ClientID %>').hide(); 

     } 

     }); 

    });

來源

2011-10-18 14:55:34 StefanE

這不考慮CSS顯示的問題，或者事實'＃txtOther'也會被重新渲染。 – Curt

那麼，在你的答案中使用類是錯誤的建議，當使用jQuery和ASP.NET ..我指出的問題是，他的JavaScript代碼將永遠不會執行，除非有正確的ID。 – StefanE

我仍然不會對最初的問題說出正確的答案。 – Curt

這個jquery驗證碼有什麼問題？

回答

相關問題