隐藏和显示文本框以及基于该下拉选择的下拉菜单？

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>

Mydropdown：

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

在我的页面加载中：如果我在页面加载中给出这样的内容，则所有下拉列表都不可见，但是在此之后，如果我从第一个下拉列表中选择了任何值，则其他下拉列表将不显示javascipt函数无法正常工作。

在页面加载中，我只想显示ddlColumnName1 dropdown.but它显示所有下拉列表。 请告诉我该怎么做。在页面加载中，根据我需要显示其他下拉列表的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>