Question

我正在努力在jquery中获取下拉列表onchange事件。从下拉列表中选择日期时，其他文本框应该是不可见的，并且日期文本框应该是可见的。选择状态时，其他文本框应该是不可见的，并且下拉列表的状态应该是可见的。它什么都没发生。请看我的代码我做错了什么。你的帮助意味着很多。

_Layout.cshtml

 <head>
  <script type="text/javascript">
    $(function () {
        $('#categorie').on('change', function () {
            if ($(this).val() == "Date") {
                $('#keyword').hide(); //invisible
                $('#txtcalendar').show();
            } else if ($(this).val() == "Status"){
                $('#keyword').hide(); //invisible
                $('#txtcalendar ').hide();
                $('#tmstatus ').show();
            }
            .
            .
            .
        });

    });
    </script> 
</head>

Index.cshtml

@Html.DropDownList("categorie", new SelectList(new[]
                                                   {
                                                       "All", "Id", "Status",
                                                       "Vendor", "Date"
                                                   }) as SelectList)



 <p> Keyword: @Html.TextBox("keyword")  <input id="Submit" type="submit" value="Search"  /> </p>

 <p>Calendar @Html.TextBox("txtcalendar", new {}, new { @class = "myclass",  style = "display:none;" })</p>

 @Html.DropDownList("tmstatus", new SelectList(new[]
                                                   {
                                                       "Success", "Pending", "Error",
                                                   }) as SelectList)

Answer 1

在您的应用程序中，转到 app_start \ BundleConfig.cs 并在 RegisterBundles 方法中检查是否已注册Jquery的捆绑。它应该为jquery添加了bundle，如下所述：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

如果 RegisterBundles 方法中没有，则添加它。并转到以下步骤：

转到 _Layout.cshtml 页面
在head标记结束之前添加 @ Scripts.Render（“〜/ bundles / jquery”）。在我的示例应用程序中，它看起来如下所述：
从 _Layout.cshtml
将其粘贴在结束的 index.cshtml 中。

我的 Index.cshtml 页面如下所示：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index Page</h2>

@Html.DropDownList("categorie", new SelectList(new[]
                                                   {
                                                       "All", "Id", "Status",
                                                       "Vendor", "Date"
                                                   }) as SelectList)



<p> Keyword: @Html.TextBox("keyword")  <input id="Submit" type="submit" value="Search" /> </p>

<p>Calendar @Html.TextBox("txtcalendar", new { }, new { @class = "myclass", style = "display:none;" })</p>

@Html.DropDownList("tmstatus", new SelectList(new[]
                                                   {
                                                       "Success", "Pending", "Error",
                                                   }) as SelectList)

<script type="text/javascript">
    $(function () {
        $('#categorie').on('change', function () {
            if ($(this).val() == "Date") {
                $('#tmstatus ').show();
                $('#keyword').hide(); //invisible
                $('#txtcalendar').show();
            } else if ($(this).val() == "Status") {
                $('#keyword').hide(); //invisible
                $('#txtcalendar ').hide();
                $('#tmstatus ').show();
            }
        });

    });
</script>

Answer 2

尝试将您的脚本放在页面底部的准备就绪中

$(document).ready(function() {
    $('#categorie').on('change', function () {
        if ($(this).val() == "Date") {
            $('#keyword').hide(); //invisible
            $('#txtcalendar').show();
        } else if ($(this).val() == "Status"){
            $('#keyword').hide(); //invisible
            $('#txtcalendar ').hide();
            $('#tmstatus ').show();
        }
        .
        .
        .
});

Answer 3

不要将您的脚本放在<head>标记中，而是将其放在布局页面的较低位置。在</body>标记之前，您会找到

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

将您的脚本放在下面，如下所示：

<body>
....
....    
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
<script type="text/javascript>
    $(function () {
        $('#categorie').on('change', function () {
           if ($(this).val() == "Date") {
               $('#keyword').hide(); //invisible
               $('#txtcalendar').show();
           } else if ($(this).val() == "Status"){
               $('#keyword').hide(); //invisible
               $('#txtcalendar ').hide();
               $('#tmstatus ').show();
           }
           .
           .
           .
    });
</script>
</body>
</html>

MVC - dropdownlist onchange从未在jquery中触发

3 个答案: