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

Question

我正在使用ASP.Net mvc呈现我的html视图。

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

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

比方说，该集合被称为水果

IList<Fruit> fruit 

水果被定义为

FruitId 
    Name 
    FruitType 

的下拉列表中会显示每个水果的名字，并有FruitId

的

当我的值更改下拉列表的值我想让我的标签的值显示FruitType。

我能想到的这样做的几种方法：

1. 写出标签标签FruitType的所有值。给一个CSS类显示负载上的第一个，并添加JavaScript来显示/隐藏选择onchange事件中的标签

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

我有2个问题：

1. 我失去了一些东西很明显，这可以以更好的方式来完成？

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

Answer 1

另一种方法是，当你产生下拉列表中，包括一个数据属性，说data-fruit-type您存储的FruitType，然后在下拉值的变化，只是读所选项目的data-fruit-type属性。