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

Question

I have a dropdown,Based on that dropdown selection i want to show other dropdown. My jquery Fuction.Jquery function was working fine But page load it was showing all dropdown you can see that image.

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>

In my page load: if i give like this in page load all dropdown is not visible but after that if i select any value from first dropdown other dropdowns are not showing javascipt function is not working.

In page load only i want to show ddlColumnName1 dropdown.But it was showing all dropdown. Please some one tell how can i do this.In page load all dropdown are invisible based on that ddlColumnName1 selection i need to display other drop downs.

Answer 1

Try hiding elements on page load in $(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>