❔ How do I hide or show a div based on the value of a property of my selected option?

<form method="post">
    <label asp-for="HabitLog.HabitTypeName" class="control-label">Select the habit to log</label>
    <select asp-for="HabitLog.HabitTypeName" class="form-control">
        <option value=" ">Select an option</option>
        @foreach (var habitType in Model.HabitTypes)
        {
            <option value="@habitType.Name">@habitType.Name</option>
        }
    </select>
    <br />
    *Other fields*

<form method="post">
    <label asp-for="HabitLog.HabitTypeName" class="control-label">Select the habit to log</label>
    <select asp-for="HabitLog.HabitTypeName" class="form-control">
        <option value=" ">Select an option</option>
        @foreach (var habitType in Model.HabitTypes)
        {
            <option value="@habitType.Name">@habitType.Name</option>
        }
    </select>
    <br />
    *Other fields*

public class HabitType
    {
        public int Id { get; set; }

        public string ImagePath { get; set; }

        public string Name { get; set; }
        
        public string Measurability { get; set; }

        public string UnitOfMeasurement { get; set; }
    }

public class HabitType
    {
        public int Id { get; set; }

        public string ImagePath { get; set; }

        public string Name { get; set; }
        
        public string Measurability { get; set; }

        public string UnitOfMeasurement { get; set; }
    }