基于下拉框选择显示/隐藏控件的简化实现方案咨询

我已经实现了根据下拉框选中值显示/隐藏链接的功能，但觉得当前代码有点繁琐，想寻求更简洁的实现方式。现有代码如下：

ASP.NET控件代码 #

<asp:DropDownList ID="ddlOption" runat="server" Width="100px" onchange="templateVisbility()">
  <asp:ListItem Value="Value1" Text="Value1" Selected="True"></asp:ListItem>
  <asp:ListItem Value="Value2" Text="Value2"></asp:ListItem>
</asp:DropDownList>
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="/myexcel.xlsx" Text="test template" />

现有JavaScript代码 #

<script type="text/javascript">
function templateVisbility() {
var e = document.getElementById("ddlOption");
var selectedval = e.options[e.selectedIndex].value;
if (selectedval != 'Value1') {
document.getElementById('Link1').style.visibility = 'hidden';
} else {
document.getElementById('Link1').style.visibility = 'visible';
}
}
</script>

优化方案 #

当然有更简洁的实现方式！我们可以从精简逻辑、减少冗余代码两个角度入手：

方案1：精简函数内的逻辑代码 #

现代浏览器支持直接通过下拉框元素的value属性获取选中值，不用再手动遍历options。再配合三元运算符替代if-else，可以把函数压缩到几行：

<script type="text/javascript">
function templateVisbility() {
  const link = document.getElementById('Link1');
  link.style.visibility = document.getElementById("ddlOption").value === 'Value1' ? 'visible' : 'hidden';
}
</script>

方案2：去掉独立函数，直接内联事件逻辑 #

如果这个逻辑只在这个下拉框使用，完全可以把代码直接写在onchange事件里，省去单独定义函数的步骤：

<asp:DropDownList ID="ddlOption" runat="server" Width="100px" 
onchange="document.getElementById('Link1').style.visibility = this.value === 'Value1' ? 'visible' : 'hidden'">
  <asp:ListItem Value="Value1" Text="Value1" Selected="True"></asp:ListItem>
  <asp:ListItem Value="Value2" Text="Value2"></asp:ListItem>
</asp:DropDownList>
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="/myexcel.xlsx" Text="test template" />

这里用this指代当前下拉框元素，直接获取选中值，代码更紧凑。

方案3：适配ASP.NET控件ID的健壮写法 #

如果你的页面使用了母版页、用户控件，ASP.NET可能会自动修改控件的ClientID，导致getElementById找不到元素。这时可以用ASP.NET的内嵌表达式获取正确的ClientID：

<asp:DropDownList ID="ddlOption" runat="server" Width="100px" 
onchange="document.getElementById('<%= Link1.ClientID %>').style.visibility = this.value === 'Value1' ? 'visible' : 'hidden'">
  <asp:ListItem Value="Value1" Text="Value1" Selected="True"></asp:ListItem>
  <asp:ListItem Value="Value2" Text="Value2"></asp:ListItem>
</asp:DropDownList>
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="/myexcel.xlsx" Text="test template" />

这种写法能确保无论ASP.NET怎么生成控件ID，JS都能正确找到目标元素。

内容的提问来源于stack exchange，提问作者Pரதீப்