如何验证下拉列表以选择至少一个 [英] How to validate dropdownlists to select atleast one

问题描述

亲爱的专家，



我有4个下拉列表和一个提交按钮。



我想要使用javascript验证它。在提交期间，用户必须至少选择一个下拉列表。



请帮忙。



谢谢



我尝试过：

Dear Experts,

I have 4 dropdownlists and a submit button.

I want to validate it using javascript. during submit User must select at least one dropdownlist.

Please help.

Thanks

What I have tried:

 <script type="text/javascript">
    function Validate() {
        var Xddl1 = document.getElementById("<%=ddl1.ClientID %>");
         var Xddl2 = document.getElementById("<%=ddl2.ClientID %>");
          var Xddl3 = document.getElementById("<%=ddl3.ClientID %>");
           var Xddl4 = document.getElementById("<%=ddl4.ClientID %>");
       
        if(Xddl1r.getElementsByTagName == "" || Xddl2.getElementsByTagName =="" || Xddl3.getElementsByTagName == "" || Xddl4.getElementsByTagName == "")
        
        {
         
            alert("Please select atleast one!");
            return false;
        }
        return true;
    }
</script>

推荐答案

有几种方法可以做到这一点。我假设，因为你没有发布太多信息。

我假设你的应用程序有下面的下拉菜单。

There are several way to do this. I'll assume, since you didn't post much information.
I assumed your application has dropdowns like below.

//ddl1
//ddl2
<asp:DropDownList ID="ddl3" runat="server">
        <asp:ListItem Text="Select" Value=""></asp:ListItem>
        <asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
        <asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
        <asp:ListItem Text="Option 3" Value="3"></asp:ListItem>
        <asp:ListItem Text="Option 4" Value="4"></asp:ListItem>
    </asp:DropDownList>
...

然后客户端验证将如下所示

Then the client side validation will look something like below

<script type="text/javascript">
        function Validate() {
            var Xddl1 = document.getElementById("<%=ddl1.ClientID %>");
            var Xddl2 = document.getElementById("<%=ddl2.ClientID %>");
            var Xddl3 = document.getElementById("<%=ddl3.ClientID %>");
            var Xddl4 = document.getElementById("<%=ddl4.ClientID %>");

            //answer[answer.selectedIndex].value
            if (Xddl1[Xddl1.selectedIndex].value == "" &&
                Xddl2[Xddl2.selectedIndex].value == "" &&
                Xddl3[Xddl3.selectedIndex].value == "" &&
                Xddl4[Xddl4.selectedIndex].value == "") {

                alert("Please select atleast one!");
                return false;
            }
            return true;
        }
    </script>

尽管如此，让它保持简单。上面的代码应该工作。下面的代码是每个控件，您可能需要查看 CustomValidator Control [ ^ ]确保选择下拉列表中的至少一个值。

我更喜欢使用验证控件来处理客户端和服务器端验证。这是一个例子。

On second though, let keep it simple. Above code should work. The code below is per control, you might need to look into CustomValidator Control[^] to ensure at least one value from the dropdown list is being selected.
My prefer alternative is to use the Validation control which will handle the client and server side validation. Here is an example.

//ddl1
...
<asp:DropDownList ID="ddl4" runat="server">
        <asp:ListItem Text="Select" Value="0"></asp:ListItem>
        <asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
        <asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
        <asp:ListItem Text="Option 3" Value="3"></asp:ListItem>
        <asp:ListItem Text="Option 4" Value="4"></asp:ListItem>
    </asp:DropDownList>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 

         Display="Dynamic" ControlToValidate="ddl4" InitialValue="0"

        ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
    <asp:Button ID="Button1" runat="server" Text="Button" />

以上标记应该处理客户端验证。然后在服务器端，代码应调用Page.IsValid方法以确保发布到服务器的任何内容都有效。

The above markup should handle the client side validation. Then on the server side, the code should call the Page.IsValid method to make sure whatever posted to the server are valid.

if (Page.IsValid)
{
    // your code here.
}

这篇关于如何验证下拉列表以选择至少一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！