Выпадающий список зависит от другого?ASP.NET MVC

Question

В этом разделе создаются предложения работы (это портал работы), из которого вам нужно выбрать Район и Подрайон. Когда я выбираю область, я должен видеть подрайоны этой области. Я оставляю изображение, чтобы увидеть состав таблиц:

Площадь столов и подрайонов

Моя модель предложения работы такая:

namespace ProyectoBase4.Models
{
using System;
using System.Collections.Generic;

public partial class OfertaLaboral
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public OfertaLaboral()
{
    this.OfertaPostulante = new HashSet<OfertaPostulante>();
}

public int Of_ID { get; set; }
public Nullable<int> OfEmp_ID { get; set; }

public string Of_Titulo { get; set; }
public string Of_Puesto { get; set; }
public Nullable<int> Of_Area { get; set; }
public Nullable<int> Of_Subarea { get; set; }
public string Of_Descrp { get; set; }
public string Of_Lugar { get; set; }
public Nullable<int> Of_Vacante { get; set; }
public Nullable<System.DateTime> Of_FechaIn { get; set; }
public Nullable<System.DateTime> Of_FechaFin { get; set; }
public Nullable<int> Of_Salario { get; set; }
public Nullable<int> Of_Jornada { get; set; }
public Nullable<int> Of_Mov { get; set; }
public Nullable<int> Of_Edu { get; set; }
public Nullable<int> Of_TContrato { get; set; }
public Nullable<int> Of_Estado { get; set; }

public virtual Area Area { get; set; }
public virtual Educacion Educacion { get; set; }
public virtual Estado Estado { get; set; }
public virtual Jornada_Compl Jornada_Compl { get; set; }
public virtual Movilidad Movilidad { get; set; }
public virtual Subarea Subarea { get; set; }
public virtual TipoContrato TipoContrato { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<OfertaPostulante> OfertaPostulante { get; set;         }
}
}

Как это сделать, выбрав поле в области, я отображаю соответствующие подтарии? Это вид:

<div class="">
                    <div class="form-group col-md-8">
                        @Html.LabelFor(model => model.Of_Titulo, htmlAttributes: new { style = "" })
                        <div class="">
                            @Html.EditorFor(model => model.Of_Titulo, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Of_Titulo, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group col-md-3">
                        @Html.LabelFor(model => model.Of_Area, htmlAttributes: new { @class = "", style = "margin-left:10px;" })
                        <div class="">
                            @Html.DropDownList("Of_Area", null, htmlAttributes: new { @class = "form-control form-control-75", style = "margin-left:10px;" })
                            @Html.ValidationMessageFor(model => model.Of_Area, "", new { @class = "text-danger" })

                        </div>
                    </div>

                </div>
                <br /><br /><br /><br />
                <div>
                    <div class="form-group col-md-4">
                        @Html.LabelFor(model => model.Of_Vacante, htmlAttributes: new { @class = "" })
                        <div class="">
                            @Html.EditorFor(model => model.Of_Vacante, new { htmlAttributes = new { @class = "form-control form-control-50" } })
                            @Html.ValidationMessageFor(model => model.Of_Vacante, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        @Html.LabelFor(model => model.Of_Salario, htmlAttributes: new { @class = "" })
                        <div class="">
                            @Html.EditorFor(model => model.Of_Salario, new { htmlAttributes = new { @class = "form-control form-control-50" } })
                        </div>
                    </div>

                    <div class="form-group col-md-3">
                        @Html.LabelFor(model => model.Of_Subarea, htmlAttributes: new { @class = "", style = "margin-left:40px;" })
                        <div class="">
                            @Html.DropDownList("Of_Subarea", null, htmlAttributes: new { @class = "form-control  form-control-75", style = "margin-left:40px;" })
                            @Html.ValidationMessageFor(model => model.Of_Subarea, "", new { @class = "text-danger" })

                    </div>
                </div>

Как я упоминал ранее, мне нужно, чтобы при выборе опции, а затем при выборе подопции мне показывались только опции этой области.

Пример:

вид

Спасибо

Answer 1

Сначала добавьте атрибут к subarea опциям с областью.

Пример можно найти здесь: SelectListItem с атрибутами данных

Во-вторых, обработайте событие change() раскрывающегося списка area в jQuery. Используйте этот обработчик событий для hide() всех опций, не относящихся к этой области, и show() тех, которые есть.

$("#Of_Area").change(function(){
   $("#Of_Subarea>option").hide();
   $("#Of_Subarea>option[area=" + $("#Of_Area>option:selected").attr("value") + "]").show();
});