Javascript动态添加选项值

Question

我创建了一个选择标记元素，但我想用模型的数据填充它，但我做不到。

这是我的代码:

<select id=senderAdress" + element + " class=senderAdressText2> </select>

var element = 0;
while(element!==3){
  var obj = document.getElementById("senderAdress"+element);
  var opt = document.createElement("option");
  opt.value=element+1;
  opt.text = "@Html.DisplayFor(model=>model.Address[element].AddressName)";
  element++;
}

这不起作用，因为在 opt.text 部分中，如您所见，我想到达我的模型的地址名称，其中我的地址[元素]。在我的 while 顶部，我创建了一个变量“element”并将其指定为 0。

问题是当我写 Address[element] 时，我收到一个错误，告诉我

The name element does not exist in current context,

但正如你所看到的，我将它分配在顶部，如果它无法访问，为什么我的 while 循环会显示错误。

Answer 1

您似乎试图将一些服务器端逻辑与客户端 JavaScript 混合在一起。 element 变量是一个 JavaScript 变量。这意味着它仅存在于客户端上。另一方面，该模型是服务器端概念，无法访问客户端变量。因此，如果您希望能够访问这些服务器端值，您可以考虑将它们存储在 JavaScript 变量中:

var values = @Html.Raw(Json.Encode(Enumerable.Range(0, 3).Select(item => Html.DisplayFor(model => model.Address(item).AddressName).ToString())));
for (var i = 0; i < values.length; i++) {
    var obj = document.getElementById('senderAdress' + i);
    var opt = document.createElement('option');
    opt.value = i + 1;
    opt.text = values[i];
}

当然，更好的解决方案是使用强类型 Html.DropDownListFor 服务器端帮助程序直接在服务器上生成下拉列表。