强制用户从下拉框中进行选择答案

【问题标题】：force users to make a selection from drop-down box强制用户从下拉框中进行选择
【发布时间】：2014-12-28 00:48:26
【问题描述】：

我试图确保用户必须从下拉框中选择某些内容，因此我使用 javascript 来检查他们是否在将数据写入数据库之前从下拉框中选择了某些内容。我在 DetailView 中有一个按钮，但无法在此处访问按钮 ID。如果用户没有从下拉列表中选择任何内容，我希望用户在点击插入按钮时收到警告。下拉菜单中的选择不应该是这个“--Select Metric Name--”

<asp:DetailsView ID="DV_InputForm" runat="server" Height="69px" Width="763px" AutoGenerateRows="False"
                CellPadding="3" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" OnItemInserting="DV_InputForm_ItemInserting"
                OnModeChanging="DV_InputForm_ModeChanging" BackColor="#DEBA84" DefaultMode="Insert"
                CellSpacing="2" Style="margin-top: 0px">

                <Fields>
                    <asp:TemplateField HeaderText="Metric Name:">
                        <ItemTemplate>
                            <asp:Label ID="lblMetricName" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.MetricName") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>

                            <asp:DropDownList ID="ddl_NewMetricName" DataTextField="NAME" DataValueField="NAME"
                                runat="server" AutoPostBack="false" Width="400" Height="25" AppendDataBoundItems="true"
                                DataSourceID="DD_METRIC_DS">
                                <asp:ListItem Text="--Select Metric Name--" Value="--Select Metric Name"></asp:ListItem>
                            </asp:DropDownList>

                        </EditItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField ShowHeader="False">
                        <ItemTemplate>
                            <asp:Button ID="btnNew" runat="server" CausesValidation="False" CommandName="New"
                                Text="Create New Server Monitoring" Font-Bold="True" BorderColor="#003366" BorderStyle="Groove"
                                Height="30px" />
                        </ItemTemplate>
                        <InsertItemTemplate>
                            <asp:Button ID="Button1" runat="server" CausesValidation="True" CommandName="Insert" OnClientClick="return validate();"
                                Text="Insert" />
                            &nbsp;<asp:Button ID="Button2" runat="server" CausesValidation="False" CommandName="Cancel"
                                Text="Cancel" />
                        </InsertItemTemplate>
                    </asp:TemplateField>
                </Fields>
                <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
                <EditRowStyle BackColor="#FFFFCC" Font-Bold="True" ForeColor="#003366" />

这是我的javascript：

  <script type="text/javascript">
         function validate() {
             var flag = true;
             var dropdowns = new Array(); //Create array to hold all the dropdown lists.
             var gridview = document.getElementById('<%=DV_InputForm.ClientID%>'); //GridView1 is the id of ur gridview.
            dropdowns = gridview.getElementsByTagName('Select'); //Get all dropdown lists contained in GridView1.
            for (var i = 0; i < dropdowns.length; i++) {
                if (dropdowns.item(i).value == 'Select') //If dropdown has no selected value
                {
                    flag = false;
                    break; //break the loop as there is no need to check further.
                }
            }
            if (!flag) {
                alert('Please make selection from the drop-down and click the insert button again.  Thanks');
                document.getElementById('<%=Button1.ClientID%>').style.visibility = 'hidden';
            }
            return flag;
        }
</script> 

                    <RowStyle BackColor="#CCCCCC" ForeColor="#8C4510" />
                </asp:DetailsView>

我现在无法编译它，因为它不喜欢这样：<%=Button1.ClientID%>，并且我在 Button1 下出现红线。看来我在 DetailView 中访问 Button1 的方式是错误的。 <%=Button1.ClientID%>

【问题讨论】：

您能否更新您的问题并解释当他们单击“插入”按钮时当前发生的情况？

标签： javascript asp.net detailview

【解决方案1】：

您需要在尝试访问它的属性之前找到该按钮，因为它在您的详细视图中。

类似这样的：

<%=((Button)DV_InputForm.FindControl("Button1")).ClientID%>

【讨论】：

我试过了，但是 java 脚本没有触发警告信息，不知道为什么会这样..
也许是因为flag总是假的？你能用一些javascript调试工具检查flag var的值吗？从我在您的代码中看到的，您似乎正在检查您的选择是否已被“选中”，也许您可以使用 SelectedIndex 代替？不要检查循环中下拉列表的值，而是尝试这样的操作来查看是否选择了一个选项： dropdowns.item(i).selectedIndex !== "-1";

【解决方案2】：

如果您需要使用客户端 JavaScript 引用服务器端控件，那么我发现将控件的 clientidmode 设置为“静态”通常更容易 - 然后您可以给它任何您想要的 ID，并且您知道它会有该 ID 在页面上，因此您可以编写 JavaScript 来使用它。

【讨论】：

【解决方案3】：

这可能是一种方法

为按钮添加CssClass属性

<asp:Button ID="Button1" runat="server" CausesValidation="True" CommandName="Insert" OnClientClick="return validate();" CssClass="UniqueClass"
                                Text="Insert" />

并通过类名访问它，如下所示。

  var btn= document.getElementsByClassName("UniqueClass");
  var Button1 = btn[0];

小心

getElementsByClassName 将返回给定类名的元素数组，因此请确保其唯一性或使用正确的索引访问它。

【讨论】：