Используйте Jquery для показа / не показа текстовых полей в зависимости от выбора выпадающего списка

Я избегал использовать jquery, насколько могу, как каждый раз, когда я пытался, у меня были проблемы. Но сегодня я намерен заставить это работать. Использование VS 2013, asp.net и VB.

У меня есть раскрывающийся список под названием AssetStatusChoice, и когда пользователь выбирает из него значение, я хочу, чтобы определенные текстовые поля были видимыми или нет. DDet AssetStatuschoice заполняется из базы данных на SQL-сервере 2012 года.

Текстовые поля содержатся в панели, которая появляется на странице при щелчке по строке сетки.

JQuery выглядит следующим образом.

<script>
    $(document).ready(function ()  {
        $('#LowerText').hide();
        $('#UpperText').hide();
        $('#AssetStatusChoice').change(function () {
            if($('#AssetStatusChoice').val("Fully Available"))
            {
                $('#CommentsText').hide();
            }
            if ($('#AssetStatusChoice').val("Restricted"))
            {
                $('#UpperLimit').show();
                $('#LowerLimit').show();
            }
            if ($('#AssetStatusChoice').val("Unavailable"))
            {
                $('#Commentstext').show();
            }
        });
    });

Asp.net выглядит следующим образом.

<ajaxToolkit:ModalPopupExtender ID="AssetPopUp" runat="server" PopupControlID="ChangeStatusPnl" TargetControlID="lnkFake"></ajaxToolkit:ModalPopupExtender>
               <asp:Panel ID="ChangeStatusPnl" runat="server">
                <table id="PopUpTable">
                    <tr>
                        <td colspan="3" align="center">
                            <asp:Label ID="AssetName" runat="server" Text="Label" style="font-weight:bold;"></asp:Label></td>
                    </tr>
                    <tr>
                        <td>
            <asp:TextBox ID="DateText" runat="server" style="font-family:'Century Gothic'; font-size:18pt;"></asp:TextBox>
            <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="DateText"></ajaxToolkit:CalendarExtender>
            <ajaxToolkit:TextBoxWatermarkExtender ID="DateWaterMark" runat="server" TargetControlID="DateText" WatermarkText="Date"></ajaxToolkit:TextBoxWatermarkExtender>

                             </td>
                        <td> 
            <asp:TextBox ID="TimeTextHrs" runat="server" style="font-family:'Century Gothic'; font-size:18pt;"></asp:TextBox>
            <ajaxToolkit:TextBoxWatermarkExtender ID="TimeHrsWaterMark" runat="server" TargetControlID="TimeTextHrs" Watermarktext="Hrs"></ajaxToolkit:TextBoxWatermarkExtender>
            <asp:TextBox ID="TimeTextMins" runat="server" style="font-family:'Century Gothic'; font-size:18pt;"></asp:TextBox>
            <ajaxToolkit:TextBoxWatermarkExtender ID="TimeMinsWaterMark" runat="server" TargetControlID="TimeTextMins" Watermarktext="Mins"></ajaxToolkit:TextBoxWatermarkExtender>

                                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:DropDownList ID="AssetStatusChoice" runat="server" DataSourceID="AssetChoiceDDL" style="font-family:'Century Gothic'; font-size:18pt;" DataTextField="AssetStatus" DataValueField="AssetStatus" AppendDataBoundItems="true">
                                <asp:ListItem Text="Select a Value"></asp:ListItem>

                            </asp:DropDownList>
                            <asp:SqlDataSource ID="AssetChoiceDDL" runat="server" ConnectionString="<%$ ConnectionStrings:Optimiser_TestConnectionString %>" SelectCommand="getAssetAvailList" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
                        </td>

                    </tr>
                    <tr>

                        <td>
                            <asp:TextBox ID="LowerText" runat="server" style="font-family:'Century Gothic'; font-size:18pt;"></asp:TextBox>
                            <ajaxToolkit:TextBoxWatermarkExtender ID="LowerTextExtender" runat="server" TargetControlID="LowerText" WatermarkText="Lower Limit"></ajaxToolkit:TextBoxWatermarkExtender>
                        </td>
                        <td>
                            <asp:TextBox ID="UpperText" runat="server" style="font-family:'Century Gothic'; font-size:18pt;"></asp:TextBox>
                            <ajaxToolkit:TextBoxWatermarkExtender ID="UpperTextExtender" runat="server"  TargetControlID="UpperText" WatermarkText="Upper Limit"></ajaxToolkit:TextBoxWatermarkExtender>
                        </td>
                    </tr>
                    <tr>
                        <td>Min:<asp:Label ID="MinValue" runat="server" Text="Label"></asp:Label></td>
                        <td>Max:<asp:Label ID="MaxValue" runat="server" Text="Label"></asp:Label></td>
                    </tr>
                    <tr>

                        <td colspan="2">
                            <asp:TextBox ID="CommentsText" runat="server" TextMode="MultiLine" style="height:100px; width:517px; font-family:'Century Gothic'; font-size:18pt;"></asp:TextBox>
                            <ajaxToolkit:TextBoxWatermarkExtender ID="CommentsExtender" runat="server"  TargetControlID="CommentsText" WatermarkText="Comments"></ajaxToolkit:TextBoxWatermarkExtender>
                        </td>

                    </tr>

                    <tr>
                        <td colspan="3" align="center">
                            <asp:Button ID="ClosePopUp" runat="server" Text="Close" style="font-family:'Century Gothic'; font-size:18pt;"/>
<asp:Button ID="CommitChanges" runat="server" Text="Commit" style="font-family:'Century Gothic'; font-size:18pt;"/>
</td>
</tr>
</table>               
</asp:Panel>

В принципе ничего не происходит, как вы можете видеть в jquery. Я хочу скрыть как нижний текст, так и верхний текст, когда появляется панель, но этого не происходит. Панель загружает все текстовые поля, когда я меняю DDL, ничего не происходит.

ОБНОВИТЬ

Спасибо за 2 предложения, но он все еще не работает. как будто он не может найти элементы управления внутри панели. Я добавил текстовое поле на страницу (не в панели) и добавил $('#textbox1').hide(); к JQuery, и это спрятало текстовое поле.

ОБНОВЛЕНИЕ 2

Я забыл упомянуть, что текстовые поля также находятся в UpdatePanel