jquery - 根据该下拉列表选择隐藏和显示文本框和下拉列表？

Question

我有一个下拉菜单，根据该下拉菜单选择，我想显示其他下拉菜单。我的 jquery Fuction.Jquery 函数工作正常，但页面加载它显示所有下拉列表，您可以看到该图像。

enter code here<script type="text/javascript">

    $(document).ready(function ()
    {
         $('#<%=ddlColumnName1.ClientID %>').change(function () {

             //Get DropDownList selected value
             var selectedValue = $('#<%=ddlColumnName1.ClientID %>').val();
             debugger;
             //Enable Controls 
             if (selectedValue == 'Select Column') {
                 $('#<%=ddlContractArea.ClientID %>').hide();
                  $('#<%=ddlBusinessArea.ClientID %>').hide();
                 $('#<%=ddlContractingParty2.ClientID %>').hide();
                 $('#<%=ddlContractingParty3.ClientID %>').hide();
                 $('#<%=ddlContractingParty4.ClientID %>').hide();
              }
             if (selectedValue == 'ContractArea') {
                 $('#<%=ddlContractArea.ClientID %>').show();
                 $('#<%=ddlBusinessArea.ClientID %>').hide();
                 $('#<%=ddlContractingParty2.ClientID %>').hide();
                 $('#<%=ddlContractingParty3.ClientID %>').hide();
                 $('#<%=ddlContractingParty4.ClientID %>').hide();
             }

         });
     });


</script>

我的下拉菜单:

<asp:DropDownList ID="ddlColumnName1" runat="server" CssClass="field_ddl_contractdetails"  >
                                                                </asp:DropDownList>

在我的页面加载中:如果我在页面加载中这样给出，所有下拉列表都不可见，但之后如果我从第一个下拉列表中选择任何值，其他下拉列表不会显示 javascipt 功能不起作用。

在页面加载中，我只想显示 ddlColumnName1 下拉列表。但它显示了所有下拉列表。请有人告诉我如何做到这一点。在页面加载中，根据我需要显示其他下拉菜单的 ddlColumnName1 选择，所有下拉菜单都是不可见的。

Answer 1

尝试在 $(document).ready(function(){}); 中隐藏页面加载时的元素；

<script type="text/javascript">
  $(document).ready(function() {

    //hide elements on page load
    $('#<%=ddlContractArea.ClientID %>').hide();
    $('#<%=ddlBusinessArea.ClientID %>').hide();
    $('#<%=ddlContractingParty2.ClientID %>').hide();
    $('#<%=ddlContractingParty3.ClientID %>').hide();
    $('#<%=ddlContractingParty4.ClientID %>').hide();

    $('#<%=ddlColumnName1.ClientID %>').change(function() {

      //Get DropDownList selected value
      var selectedValue = $('#<%=ddlColumnName1.ClientID %>').val();
      debugger;
      //Enable Controls 
      if (selectedValue == 'Select Column') {
        $('#<%=ddlContractArea.ClientID %>').hide();
        $('#<%=ddlBusinessArea.ClientID %>').hide();
        $('#<%=ddlContractingParty2.ClientID %>').hide();
        $('#<%=ddlContractingParty3.ClientID %>').hide();
        $('#<%=ddlContractingParty4.ClientID %>').hide();
      }
      if (selectedValue == 'ContractArea') {
        $('#<%=ddlContractArea.ClientID %>').show();
        $('#<%=ddlBusinessArea.ClientID %>').hide();
        $('#<%=ddlContractingParty2.ClientID %>').hide();
        $('#<%=ddlContractingParty3.ClientID %>').hide();
        $('#<%=ddlContractingParty4.ClientID %>').hide();
      }

    });
  });
</script>