在ASP.NET中如何通过JavaScript根据下拉框选择隐藏目标下拉框

我有两个ASP DropDownList，分别是cmb_stocktype和cmb_tagno，需求是选择cmb_stocktype的WithStock选项时显示cmb_tagno，选其他选项则隐藏它。当前代码如下，但使用jQuery的show()/hide()以及原生style.display、style.visibility都无法生效：

<asp:DropDownList CssClass="form-control" id="cmb_stocktype" runat="server">
    <asp:ListItem Value="WithStock">WITH STOCK</asp:ListItem>
    <asp:ListItem Value="WithoutStock">WITHOUT STOCK</asp:ListItem>
</asp:DropDownList>                                    

<asp:DropDownList ID="cmb_tagno" runat="server" Style="width:90%;" CssClass="form-control" ClientIDMode="Static" ></asp:DropDownList>

$("#<%= cmb_stocktype.ClientID %>").change(function () {
    if ($("#<%= cmb_stocktype.ClientID %>").val() == "WithStock") {
        $("#<%=cmb_tagno.ClientID%>").show()
    }
    else {
        $("#<%=cmb_tagno.ClientID%>").hide()
    }
});

排查修复要点： #

1. 确保jQuery已正确引入
   页面头部必须先引入jQuery库，否则所有jQuery语法都无法执行，可使用本地文件路径：

   <script src="/scripts/jquery-3.7.1.min.js"></script>
   

   （注：路径需根据项目实际的jQuery文件位置调整）

2. 保证代码在DOM加载完成后执行
   把JS代码包裹在$(document).ready()中，避免DOM元素还未渲染就执行绑定逻辑：

   $(document).ready(function() {
       $("#<%= cmb_stocktype.ClientID %>").change(function () {
           var selectedVal = $(this).val(); // 用$(this)简化代码，避免重复选择DOM
           if (selectedVal == "WithStock") {
               $("#cmb_tagno").show(); // 因为cmb_tagno设了ClientIDMode="Static"，可以直接用ID选择
           }
           else {
               $("#cmb_tagno").hide();
           }
       });
   
       // 页面加载时初始化状态：默认隐藏cmb_tagno
       if ($("#<%= cmb_stocktype.ClientID %>").val() !== "WithStock") {
           $("#cmb_tagno").hide();
       }
   });
   

3. 检查ClientID匹配

   • cmb_tagno已经设置ClientIDMode="Static"，前端ID就是cmb_tagno，无需再用<%=cmb_tagno.ClientID%>，直接用$("#cmb_tagno")更简洁。
   • 如果cmb_stocktype没有设置Static，<%= cmb_stocktype.ClientID %>会生成正确的前端ID，确保渲染后的HTML中该选择器能匹配到元素。

4. 初始状态设置
   页面首次加载时，要根据cmb_stocktype的默认选中值，设置cmb_tagno的显示/隐藏状态，避免初始状态不符合需求。

修复后完整代码示例： #

<asp:DropDownList CssClass="form-control" id="cmb_stocktype" runat="server">
    <asp:ListItem Value="WithStock">WITH STOCK</asp:ListItem>
    <asp:ListItem Value="WithoutStock" Selected="True">WITHOUT STOCK</asp:ListItem>
</asp:DropDownList>                                    

<asp:DropDownList ID="cmb_tagno" runat="server" Style="width:90%;" CssClass="form-control" ClientIDMode="Static" ></asp:DropDownList>

<script src="/scripts/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
    var stockTypeSelect = $("#<%= cmb_stocktype.ClientID %>");
    var tagNoSelect = $("#cmb_tagno");

    // 绑定change事件
    stockTypeSelect.change(function () {
        if ($(this).val() === "WithStock") {
            tagNoSelect.show();
        } else {
            tagNoSelect.hide();
        }
    });

    // 初始化显示状态
    if (stockTypeSelect.val() !== "WithStock") {
        tagNoSelect.hide();
    }
});
</script>

内容的提问来源于stack exchange，提问作者s.k.Soni