Question

我尽量避免使用jquery，因为每次尝试我都遇到问题。但今天我决心让这个工作。使用VS 2013，asp.net和VB。

我有一个名为AssetStatusChoice的下拉列表，当用户从中选择一个值时，我希望某些文本框可见或不可见。 AssetStatuschoice DDL从SQL Server 2012上的数据库填充。

当单击一行gridview时，文本框包含在页面上弹出的面板中。

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中看到的那样，我想在面板出现时隐藏Lowertext和Uppertext，但这不会发生。当我更改DDL时，面板加载所有文本框。

更新

感谢您提出的2项建议，但仍然无效。它似乎无法在面板中找到控件。我在页面中添加了一个文本框（而不是在面板中），并将$('#textbox1').hide();添加到JQuery中，并隐藏了文本框。

更新2

我忘了提到文本框也在UpdatePanel

中

Answer 1

您正在设置返回jQuery对象的值val("value")。

更改您的if条件like val()=="valueToTest"。

 if($('#AssetStatusChoice').val("Fully Available"))

到

if($('#AssetStatusChoice').val()==="Fully Available")

同时

$('#AssetStatusChoice').val()==="Restricted" $('#AssetStatusChoice').val()==="Unavailable"

Answer 2

只是添加了Murali发布的答案：看看是否有效

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

Answer 3

使用Firebug或其他工具在浏览器中检查您的UpperTextbox和LowerTextBox ID，看看您的文本框中是否没有任何前缀。

Answer 4

对它进行排序。

由于有更新面板，我必须在更新面板中的代码中添加以下内容。

<script type="text/javascript" language="javascript">
                                 Sys.Application.add_load(jScript);
        </script>

然后我将我的jquery更新为以下内容。

    <script>
    function jScript() {

            $('#LowerText').hide();
            $('#UpperText').hide();
            $('#min').hide();
            $('#max').hide();
            $('#AssetStatusChoice').change(function () {
            if ($('#AssetStatusChoice').val() == "Fully Available")
            {
                $('#CommentsText').hide();
            }
            if ($('#AssetStatusChoice').val() == "Restricted")
            {
                $('#LowerText').show();
                $('#UpperText').show();
            }
            if ($('#AssetStatusChoice').val() == "Unavailable")
            {
                $('#Commentstext').show();
            }
        });
        };

            </script>

根据下拉列表选择，使用Jquery显示/不显示文本框

4 个答案: