jquery - jqueryでのドロップダウンリストの選択に基づくツールとバインディングデータの非表示/表示

Question

いくつかのラベル、テーブルに含まれるテキストボックスを非表示にし、ドロップダウンリストの選択に基づいてテーブルの1つを表示するjqueryコードを作成しました。また、サーバーからいくつかのデータを取得し、それを jquery コード自体のテーブルのラベル、テキスト ボックスに割り当てています。私の問題は、オプションのいずれかを選択すると、すべてのテーブルが非表示になることです。しかし、私のコード ロジックは 1 つのテーブルを表示することです。すべて順調。コード ファイルの背後にポストバックはありません。手伝ってくれませんか？前もって感謝します。私のコードは次のとおりです。

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

テーブルの1つのコードは次のとおりです。

<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;
        }
    }
}