Question

我编写了一个jquery代码来隐藏一些标签，包含在表格中的文本框，并根据下拉列表的选择显示其中一个表格。我还从服务器检索一些数据并将其分配给jquery代码本身的表中的标签，文本框。我的问题是当我选择其中一个选项时，所有表都被隐藏了。但我的代码逻辑是显示一个表。一切都好。即使代码文件背后也没有回发。你能救我吗？提前致谢。我的代码如下，

$(function() {
    //start of function...

var d1;

 $.ajax({
    type: "POST",
    url: "<%=ResolveUrl("~/HRLetterService.asmx") %>/GetUserDetailsByUserId",                    
    contentType: "application/json; charset=utf-8",
    data: "{userid : '" + $("#<%=hInitiatorUserId.ClientID %>").val() + "'}",
    dataType: "json",
    success: function(msg) {
        //alert("success executed");
        d1 = eval(msg.d);               
                            } 
});

$("#<%=ddlLetterType.ClientID %>").change(function (ev) {
    var o = $(this);
    if(o.val() == "1") {
        $("#<%=lblEmployeeName.ClientID %>").text(d1.employee_name);
        $("#<%=tblBusinessData.ClientID %>").show();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                 
    } else if(o.val() == "2") {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").show();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                 
    } else if(o.val() == "3") {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").show();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                 
    } else if(o.val() == "4") {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").show();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                
    } else if(o.val() == "5") {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").show();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                 
    } else if(o.val() == "6") {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").show();                 
    } else {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                 
    }
});

});
//end of function.

其中一个表的代码如下，

<div style="width: 98%; margin-left: 10px; margin-right: 10px;">
    <table class="tableClass" id="tblBusinessData" style="display: none; width: 100%"
        runat="server">
        <tr class="trClass" style="width: 100%">
            <th class="full" colspan="4">
                Details
            </th>
        </tr>
        <tr class="trClass">
            <td class="first" style="width: 20%">
                Employee Name:
            </td>
            <td class="last" style="width: 30%">
                <asp:Label ID="lblEmployeeName" runat="server" Width="62%" TabIndex="1"></asp:Label>
            </td>
            <td class="first" style="width: 20%">
                Company:
            </td>
            <td class="last" style="width: 30%">
                <asp:Label ID="lblCompanyName" runat="server" Width="62%" TabIndex="2"></asp:Label>
            </td>
        </tr>
        .
        .
        .
        .

我在pageload后面的文件代码代码如下，

 protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        try
        {
            if (Request["requestid"] == "0")
            {
                BindLetterType();
            }
            else
            {}
        }
        catch (Exception exp)
        {
           throw exp;
        }
    }
}

Answer 1

您可以通过简单地用一行隐藏整个类别的表来删除所显示的代码的90％，并删除其中包含hide()的所有其他行。

现在只显示基于所选选项的适用表格。现在，如果您将表“name”存储在选项标记中，您只需使用该表来匹配表的ID，就可以将其从更改事件中拉出来

   <option value="2" data-table="tblBusinessData">Option text</option>


   $("#<%=ddlLetterType.ClientID %>").change(function (ev) {
       /* hide all tables*/
       $('.tableClass').hide();
        var table=$(this).find(':selected').data('table');
        /* show table chosen*/
        $('#'+table).show();
        /* prevent default */
       return false;
   });

如果选项标记的数值与tableClass表之间存在任何索引关系，则可以选择将data-table添加到选项标记：

$("#<%=ddlLetterType.ClientID %>").change(function (ev) {

        var tableINdex= 1* $(this).val()-1;
       /* hide all tables, except indexed one*/
       $('.tableClass').hide().eq( tableIndex).show();  

   });

jQuery Index Method Docs

或者将表ID存储在数组中，索引与选项标记值

匹配

     var tables=['tblBusinessData',
    'tblEmploymentData',
    'tblNoObjectionData',
    'tblPersonalData',
    'tblSalaryData',
    'tblSalaryTransferData'];

   $("#<%=ddlLetterType.ClientID %>").change(function (ev) {           
        var tableINdex= 1* $(this).val()-1;
       /* hide all tables, except indexed one*/
       $('.tableClass').hide()
       $('#'+ tables [ tableINdex ]).show(); 
        /* prevent default */
       return false;           
   });

根据jquery中的下拉列表选择隐藏/显示工具和绑定数据

1 个答案: