开发者问题收集

Javascript 无法找到元素 ID

2017-09-02
310
javascript asp.net

我将我的 javascript 函数放在一个 javascript 文件中，因为这个函数使用了我的大部分页面。 

function setSecondaryItem() {
var select = document.getElementById("<%= SecondaryArea.ClientID %>");
var len = select.length;
...
...}

我也把它放在我的页面中 

 <script type="text/javascript" src="../NormalUseFuction.js"></script>

当下拉列表更改时，我调用此函数 

<asp:DropDownList runat="server" ID="PrimaryArea" onchange="setSecondaryItem()" >
    <asp:ListItem Value="" Text="select..." Selected="True"></asp:ListItem>
    <asp:ListItem Value="A" Text="A.."></asp:ListItem>
    <asp:ListItem Value="B" Text="B.."></asp:ListItem>
    <asp:ListItem Value="D" Text="D.."></asp:ListItem>
    <asp:ListItem Value="E" Text="E.."></asp:ListItem>
    <asp:ListItem Value="F" Text="F.."></asp:ListItem>
    </asp:DropDownList>
<asp:DropDownList runat="server" ID="SecondaryArea" >
    <asp:ListItem Value="1" Text="1.."></asp:ListItem>
    <asp:ListItem Value="2" Text="2.."></asp:ListItem>
    <asp:ListItem Value="3" Text="3.."></asp:ListItem>
    <asp:ListItem Value="4" Text="4.."></asp:ListItem>
    <asp:ListItem Value="5" Text="5.."></asp:ListItem>
</asp:DropDownList>

但我发现这会出现错误：未捕获的 TypeError：无法读取 null 的属性“length”

有人可以告诉我如何解决这个问题吗？

注意：页面中实际上是两个下拉列表。更改下拉列表 1 将调用该函数来更改下拉列表 2。

2个回答

您使用的这个 <%= SecondaryArea.ClientID %> 被称为 代码块 。 您还可以参考 stackoverflow 上的 这个问题 以了解更多详细信息。

代码块不能放在外部 JavaScript 文件中，因为它们需要呈现为 C# 代码。

由于您的 JavaScript 函数 setSecondaryItem 在许多页面中使用，并且重复使用它当然不好，因此您需要在外部 JavaScript 文件中定义您的函数，并使用您的代码块作为参数调用它（在您需要的任何页面中）。

您的外部 JavaScript 文件： 

function setSecondaryItem(secondaryAreaId) {
    var select = document.getElementById(secondaryAreaId);
    var len = select.length;
    ...
}

在您的 .aspx 文件中： 

<script type="text/javascript" src="../NormalUseFuction.js"></script>

<script type="text/javascript">
    setSecondaryItem("<%= SecondaryArea.ClientID %>");
</script>
Ahmad Maleki
2017-09-02

从 select.length 中您应该可以获取项目长度，如果仍然没有获取到请尝试以下代码行，也许它会对您有所帮助。 

select.options.length
Prashant Hadole
2017-09-02