0

我编写了一个 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>
        .
        .
        .
        .

我在页面加载时的文件代码后面的代码如下，

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

1 回答 1

2

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

现在仅根据所选选项显示适用的表格。现在，如果您将表“名称”存储在选项标签中，您可以简单地使用它来匹配表的 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;
   });

除了添加data-table到选项标签之外，如果选项标签的数值与 tableClass 表之间存在任何索引关系，您可以执行以下操作：

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

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

   });

jQuery 索引方法文档

或将表 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;           
   });
于 2012-06-25T05:01:35.860 回答