Geek asks and answers

MVC - onchange dropdown has never been run in jquery

I am trying to get the onchange event dropdown in jquery. When selecting a date from the drop-down list, another text field should be invisible, and the date text field should be visible. And when choosing a status, other text fields should be invisible, and the status of the drop-down list should be visible. This is not happening. Look at my code, what am I doing wrong. Your help means a lot.

_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)
+3
source share
3 answers

app_start\BundleConfig.cs RegisterBundles , JQuery . jquery, :

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

RegisterBundles, . :

  • _Layout.cshtml

  • @Scripts.Render( "~/bundles/jquery" ) head. , :

    enter image description here

  • javascript dropdownlist _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>
+3

script

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

script <head>, . </body>

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

script:

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

More articles:


All Articles