初始页面加载后在页面上显示动态项目

Question

我正在使用ASP.Net mvc来渲染我的html视图。

该视图包含下拉列表和标签

我在视图模型中使用集合加载下拉列表。

让我们说这个集合叫做水果

IList<Fruit> fruit

水果定义为

  FruitId
  Name
  FruitType

下拉列表将显示每个Fruit名称，其值为FruitId

当我更改下拉列表的值时，我希望我的标签的值显示为FruitType。

我可以想到几种方法：

1. 为FruitType的所有值写出Label标签。给一个css类在加载时显示第一个，并在select onchange事件中添加javascript来显示/隐藏标签

2. 在html的某个地方提供Fruit的json数组（我会在页面加载时序列化Fruit列表并将生成的脚本放在页面的某个地方）。我会将javascript添加到select的onchnage事件中以搜索json并相应地更改标签值。

我有两个问题：

1. 我错过了一些明显的东西，这可以用更好的方式完成吗？

2. 如果没有2是个好主意，我应该把json放在html中以便js可以使用它？

Answer 1

另一种方法是，当您生成下拉列表时，请包含数据属性，例如data-fruit-type存储FruitType，然后当下拉列值更改时，只需阅读{{1}来自所选项目的属性。