ASP.NET下拉列表选项取决于其他下拉列表中的选定选项

时间:2016-10-31 23:24:50

标签: javascript jquery asp.net

我有一个简单的ViewModel,我在我的应用程序中传递给它,它有两个SelectLists,有几个选项,例如:

public class MyViewModel {

public SelectList Names { get; set;}   // e.g options - N1,N2,N3

public SelectList Years { get; set;}  // e.g options -  Y1,Y2,Y3


}

为每个SelecLists定义了几个选项。在我看来,我有两个DropDownListFor,用户可以在其中轻松选择选项 - 它是独立的。

但我想要做的是,当用户在第一个下拉列表选项N1中选择时,在第二个下拉列表中将只有选项Y2,Y3。当用户选择N2时,在第二个中只会出现N3等。

jQuery的东西可能吗?如何获取当前在特定下拉列表中选择哪个选项的信息?用JavaScript?

2 个答案:

答案 0 :(得分:0)

是的,它可以使用javascript。

首先,您需要使用javascript或Jquery从下拉列表中获取所选选项,例如:

  

yourSelect.options [yourSelect.selectedIndex] .value

然后你必须用javascript或jquery设置一个disabled属性。

这篇文章here中的答案可能会有所帮助。

此外,请查看此example

如果您希望将它们完全删除,那么您需要通过使用JQuery删除节点来解决它们。

答案 1 :(得分:0)

我用jQuery解决了我的问题,如果有人需要它:

  @Html.DropDownListFor(model => model.Name, Model.Names, "Wybierz rodzaj", new { @class = "form-control", onchange="setRateOptionsByDepositType(this.value)"})

.js文件:

function setRateOptionsByDepositType(type) {

    if (type === "Lokata standardowa") {
        $('#rate').prop('selectedIndex', 0);
        $('option[value="0,60"]').hide();
        $('option[value="1,70"]').show();
        $('option[value="2,00"]').show();
        $('option[value="2,20"]').show();
        $('option[value="2,70"]').show();
    }
    else if (type === "Rachunek oszczędnościowy") {
        $('#rate').prop('selectedIndex', 0);
        $('option[value="0,60"]').show();
        $('option[value="1,70"]').hide();
        $('option[value="2,00"]').hide();
        $('option[value="2,20"]').hide();
        $('option[value="2,70"]').hide();
    }
}

其中rate是此页面中其他下拉列表的ID