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

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>
        .
        .
        .
        .

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

 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() 的所有其他行。

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