下拉列表依赖于另一个？ ASP.NET MVC答案

【问题标题】：Dropdownlist dependent on another? ASP.NET MVC下拉列表依赖于另一个？ ASP.NET MVC
【发布时间】：2019-09-05 22:19:14
【问题描述】：

此部分创建工作机会（它是一个工作门户），您需要从中选择区域和子区域。当我选择一个区域时，我应该看到该区域的子区域。我留下一张图片来查看表格的组成：

tables area & subarea

我的工作机会模型是这样的：

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>

正如我之前提到的，当我选择一个选项时，我需要它，然后当我选择子选项时，只有该区域的选项出现在我面前。

例子：

view

谢谢

【问题讨论】：

你试过使用on-change事件吗？
你尝试过使用 jQuery 吗？
这被称为级联下拉菜单...如果你用谷歌搜索这些术语，你应该会找到很多现有的例子
这个问题还没有回答吗？
是的，我尝试过使用 jquery，但它只适用于“区域”模型 (Area_ID)，当我尝试将它与“OfertaLaboral”一起使用时，它不起作用，也许它正在声明脚本错误，很抱歉之前没有回复。

标签： c# jquery asp.net asp.net-mvc asp.net-mvc-5

【解决方案1】：

首先，将属性添加到subarea 选项与区域。

可以在此处找到示例：SelectListItem with data-attributes

其次，处理jQuery中area下拉的change()事件。使用该事件处理程序来hide() 不在该区域的所有选项，以及show() 那些在该区域的选项。

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

【讨论】：