ASP.NET 5 MVC show and hide div-element with jQuery

Question

I am trying to hide some html forms in my mvc application. I am using jQuery to try and hide my elements.

here is my razor page

<div id="Types" class="form-group">
            <label asp-for="Type" class="control-label"></label>
            <select asp-for="Type" class="form-control">
                <option>Select a Type</option>
                <option value="Book">Book</option>
                <option value="AudioBook">AudioBook</option>
                <option value="ReferenceBook">Reference Book</option>
                <option value="DVD">DVD</option>
            </select>
            <span asp-validation-for="Type" class="text-danger"></span>
        </div><div id="ThePages" class="form-group">
            <label asp-for="Pages" class="control-label"></label>
            <input asp-for="Pages" class="form-control" />
            <span asp-validation-for="Pages" class="text-danger"></span>
        </div>
        <div id="TheRunTime" class="form-group">
            <label asp-for="RunTimeMinutes" class="control-label"></label>
            <input asp-for="RunTimeMinutes" class="form-control">
            <span asp-validation-for="RunTimeMinutes" class="text-danger"></span>
        </div>
        <div id="Borrowable" class="form-group form-check">
            <label class="form-check-label">
                <input class="form-check-input" asp-for="IsBorrowable" /> @Html.DisplayNameFor(model => model.IsBorrowable)
            </label>
        </div>
        <div id="BorrowedBy" class="form-group">
            <label asp-for="Borrower" class="control-label"></label>
            <input asp-for="Borrower" class="form-control" />
            <span asp-validation-for="Borrower" class="text-danger"></span>
        </div>
        <div id="TheDate" class="form-group">
            <label asp-for="Date" class="control-label"></label>
            <input asp-for="Date" class="form-control" />
            <span asp-validation-for="Date" class="text-danger"></span>
        </div>

As you can see, I am using Id's on the elements. Here is the jQuery code

function hideOnLoad() {
        $("#ThePages").hide();
        $("#TheRunTime").hide();
        $("#Borrowable").hide();
        $("#BorrowedBy").hide();
        $("#TheDate").hide();
    }



  $(document).ready(function () {
        hideOnLoad();
        $("#Types").change(function () {
            var value = $(this).val();
            if (value = "Book") {
                $("#ThePages").show();
                $("#TheRunTime").show();
                $("#Borrowable").show();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else if (value == "AudioBook") {
                $("#ThePages").hide();
                $("#TheRunTime").hide();
                $("#Borrowable").hide();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else if (value == "ReferenceBook") {
                $("#ThePages").show();
                $("#TheRunTime").hide();
                $("#Borrowable").hide();
                $("#BorrowedBy").hide();
                $("#TheDate").hide();
            }
            else if (value == "DVD") {
                $("#ThePages").hide();
                $("#TheRunTime").show();
                $("#Borrowable").show();
                $("#BorrowedBy").show();
                $("#TheDate").show();
            }
            else {
                hideOnLoad();
            }
        });
    });

In the first function, loadOnDisplay() i am removing all the elements I dont want to show, as a default. The idea here is when the user is selecting for example "Book", only the book-related elements will be visible for the user. And the same goes for example a DVD.

The first function works, but when i am trying to choose a book or dvd it display some of the element but not all of them. And nothing happends when I try to change my choice.

What am I missing here?

Answer 1

The #Types element is a <div>, so this won't work:

$("#Types").change(function () {
    var value = $(this).val();
    //...
});

It may indeed be catching the change event as it bubbles up, but the <div> itself has no "value". Instead of using the <div>, use the <select>:

$("#Types select").change(function () {
    var value = $(this).val();
    //...
});