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 部分中，您可以看到我想在我的地址 [元素] 中访问我的模型的地址名称。在我的顶部，我创建了一个变量“元素”并将其分配为 0。

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

name元素在当前上下文中不存在，

但正如您所见，我将其分配在顶部，如果无法访问，为什么我的 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 服务器端助手直接在服务器上生成下拉列表。

Answer 2

看起来您在 Razor 模板中混合了 Javascript 和 C#。 C# 部分无法访问 Javascript 部分中定义的变量。为什么不用 C# 做所有事情？

如果您想在 JS 中执行此操作，并且您事先知道所有项目，则需要将模型中的所有值存储到 JS 数组中。在这种情况下，元素索引将对应于一个本地 JS 变量。