我有一个包含多个字段的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 }
}
答案 0 :(得分:1)
您的客户端代码可能没问题,但AutoPostback = true
上的问题是DeliveryTypeList
。此设置会导致客户端在选定的索引更改时发布到服务器,因此changeTextFields
中的代码无关紧要。
如果您需要AutoPostback = true
,则必须在服务器端添加一些额外的逻辑,以便在回发时执行客户端代码。
答案 1 :(得分:0)
下拉列表的ID永远不会相同,因为它是服务器端控件。在Java Script中使用class。
检查
遇到类似的问题。
答案 2 :(得分:0)
为了维护客户端状态,您希望在从服务器返回后在页面加载时调用脚本。
由于您使用的是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>