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

Posted 2023-05-09

【中文标题】下拉列表依赖于另一个？ ASP.NET MVC

【英文标题】：Dropdownlist dependent on another? 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”一起使用时，它不起作用，也许它正在声明脚本错误，很抱歉之前没有回复。

【参考方案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();
);