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下拉列表。但是它显示了所有下拉列表。请有人告诉我该怎么做。在页面加载中，所有下拉列表都是不可见的，基于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>

根据下拉选项隐藏和显示文本框和下拉列表？

1 个答案: