Question

我在按钮点击时验证下拉asp控件时遇到问题。我有一个面板，其中包含单选按钮，文本框，下拉列表和保存按钮。如果选择了zip的单选按钮，则会出现一个下拉列表（与后面的代码中的数据绑定），您必须从列表中选择一个zip。我无法通过按钮单击保存按钮来验证是否从下拉列表中进行了选择。我想用jQuery做这件事，并尝试这样做，弹出并提醒，但它不起作用。喜欢让它在按钮的onClick之前验证选择。

<script type="text/javascript">
$(document).ready(function() {
    $('#btn_submit').click(function() {
        if ($('#ZIPDD').val() > 0) {
            return true;
        }
        else {
            alert('Please select a zip.');
            return false;
        }
    });

});

<asp:UpdatePanel runat="server" ID="UP6" ChildrenAsTriggers="false" UpdateMode="conditional">
<ContentTemplate>
    <table style="text-align:center;" cellpadding="5px">
        <tr>
            <td>
                <table runat="server" id="_table" width="100%" cellspacing="10">
                    <tr>
                        <td style="width:100px; font-weight:bold; padding-bottom:inherit;" valign="middle">
                            <div>STEP 1:</div>
                            <div>Enter a #</div>
                        </td>
                        <td align="left" valign="middle" style=" margin-bottom:15px;">
                            <asp:TextBox runat="server" ID="txt_nbr" Width="70px"/>
                            <asp:Button ID="Button1" Text="Continue" runat="server" OnClick="Button1_Click"/>
                        </td>
                    </tr>
                     <tr>
                        <td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">                              
                        </td>
                        <td style="border:2px solid gray; background-color:Silver;">
                            <table runat="server" id="SHTable" visible="false" width="100%">
                                <tr align="left">
                                    <th style="font-weight:bold;border-bottom:2px solid black;">Methods</th>
                                    <th style="font-weight:bold;border-bottom:2px solid black;">Location</th>
                                    <th style="font-weight:bold;border-bottom:2px solid black;">&nbsp;<asp:Label runat="server" ID="DOTEXT"></asp:Label></th>
                                </tr>
                                <tr align="left">
                                    <td>
                                        <div style="margin-bottom:10px;"><asp:CheckBox runat="server" ID="ZIP" Text="ZIP" AutoPostBack="true" OnCheckedChanged="ZIP_CheckedChanged" /></div>
                                    </td>
                                    <td style="width:300px;">
                                        <asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/><br /><asp:Label ID="ziplabel" Visible="false" runat="server" style="color: red; font-size:12px;"/>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                     <tr>
                        <td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">
                            <div>Confirm changes and hit save</div>    
                        </td>
                        <td align="left" valign="middle">
                            <asp:Button Text="Save" runat="server" ID="btn_submit" OnClick="btn_submit_Click" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>
</ContentTemplate>

绑定到页面加载后面代码中的下拉列表

      protected void Page_Load(object sender, EventArgs e)
{
    if (ZIPDD.Items.Count == 0)
    {
        Loadzips();
    }
}
private void LoadBranches()
{
    using (SqlConnection SQLCONN)
    {
        SQLCONN.Open();
        SqlCommand SQLCOMM = SQLCONN.CreateCommand();
        SQLCOMM.CommandText = "SELECT * FROM table";
        IDataReader dr = SQLCOMM.ExecuteReader();
        ZIPDD.DataSource = dr;
        ZIPDD.DataValueField = "ZIPID";
        ZIPDD.DataTextField = "ZIPLABEL";
        ZIPDD.DataBind();
        ZIPDD.Items.Insert(0, new ListItem(String.Empty, String.Empty));
        ZIPDD.SelectedIndex = 0;
    }
}

Answer 1

为什么不看一下使用jQuery.validate插件。它将验证附加了“必需”类的所有表单项。如果突出显示复选框，您可以使用jQuery和addClass添加下拉列表所需的类。

if($('#radio_button').is(':checked')) { 
$( ".dropDownClassIdentifier" ).addClass( "required" );
}
else
{
$( ".dropDownClassIdentifier" ).removeClass( "required" );
}

http://jqueryvalidation.org/和 http://api.jquery.com/addClass/是开始寻找文档的好地方

Answer 2

当您计划使用javascript / jquery时，请注意控件在客户端的呈现方式。您将visible="false"设置为表和控件，它们永远不会在客户端呈现。你无法使用jquery找到它们。要正常工作，您需要设置：

<table runat="server" id="SHTable" visible="false" width="100%">

到此：

<table runat="server" id="SHTable" style="display:none" width="100%">

也改变了这个：

<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/>

到此：

<asp:DropDownList runat="server" ID="ZIPDD" style="display:none"/>

要测试您的脚本，请为表格和下拉列表设置style="display:block"，否则您将看到porpup选择一个zip（下拉值为0）。

祝你好运！

按钮单击时的JQuery验证下拉选择

2 个答案: