下拉框中的文本将其他文本字段设置为禁用

Text in drop down sets other text fields as disabled

本文关键字：文本 字段 设置 其他      更新时间：2023-09-26

我有一个包含多个字段的ASPX表单。

有问题的字段(下拉框)被选中时应该禁用另一个下拉框和文本框，但由于某种原因它不起作用

我做错了什么?

<td class="td"><asp:DropDownList ID="DeliveryTypeList" runat="server" AutoPostBack="true" onchange="javascript:changeTextFields();"></asp:DropDownList></td>

我的javascript是:

<script type = "text/javascript">
function changeTextFields() {
    var val = document.getElementById("DeliveryTypeList").text;
    if (val == "PO Box 110") {document.getElementById("ReceivedFrom").disabled = false;  document.getElementById("ReferenceNumber").disabled = false }
    if (val == "Courier Delivery") { document.getElementById("ReceivedFrom").disabled = true; document.getElementById("ReferenceNumber").disabled = false }
}

您的客户端代码可能很好，但您的问题是AutoPostback = true上的DeliveryTypeList。此设置导致客户端在选定索引更改时向服务器发布，因此changeTextFields中的代码无关。

如果你需要AutoPostback = true，那么你必须在服务器端添加一些额外的逻辑来执行你的客户端代码的回发

下拉列表的id永远不会相同，因为它是一个服务器端控件。在Java脚本中使用class代替。

检查

当下拉选择的值改变时隐藏div

用于类似的问题。

为了维护客户端状态，您需要在从服务器返回页面加载后调用该脚本。

因为你正在使用javascript，你可以使用e.options[e.selectedIndex].value来检索下拉列表的选定值。

我的想法:与javascript相比，使用jQuery会更容易选择DOM。

<asp:DropDownList ID="DeliveryTypeList" runat="server" 
    AutoPostBack="true" onchange="javascript:changeTextFields();">
    <asp:ListItem Text="PO Box 110" Value="PO Box 110" />
    <asp:ListItem Text="Courier Delivery" Value="Courier Delivery" />
</asp:DropDownList>
<asp:DropDownList ID="ReceivedFrom" runat="server">
</asp:DropDownList>
<asp:TextBox ID="ReferenceNumber" runat="server" />
<script type="text/javascript">
    function changeTextFields() {
        var e = document.getElementById('<%= DeliveryTypeList.ClientID %>');
        var val = e.options[e.selectedIndex].value;
        if (val == "PO Box 110") {
            alert(val);
            document.getElementById('<%= ReceivedFrom.ClientID %>').disabled = false;
            document.getElementById('<%= ReferenceNumber.ClientID %>').disabled = false;
        }
        if (val == "Courier Delivery") {
            alert(val);
            document.getElementById('<%= ReceivedFrom.ClientID %>').disabled = true;
            document.getElementById('<%= ReferenceNumber.ClientID %>').disabled = false;
        }
    }
    // Call at page load
    changeTextFields();
</script>
相关文章：