在 HTML 中访问 JS 枚举值答案

【问题标题】：Access JS Enum Value in HTML在 HTML 中访问 JS 枚举值
【发布时间】：2017-05-25 18:35:36
【问题描述】：

我正在制作一个使用标签的表单。我有一个枚举，我现在将其称为myEnum，其值为Val1、Val2 和Val3。我想从枚举中分配选择标签值中的选项，如下所示：

<select>
    <option value=myEnum.Val1>Text Goes Here</option>

这样做的正确语法是什么？

【问题讨论】：

JavaScript 没有“枚举”。

标签： javascript html enums

【解决方案1】：

一种选择是在 Javascript 块中打印出您的 HTML，如下所示：

document.write('<select><option value="' + myEnum.Val1 + '">Text</option>...');

另一种选择是使用 jQuery/Javascript 在运行时分配值。

<select><option id="option1">Text</option>...

$(document).ready 块中的以下内容：

$("#option1").attr("value", myEnum.Val1);

【讨论】：

【解决方案2】：

你不能像这样直接在 HTML 中使用 JS 变量，你必须通过 javascript 填充选择。

var myEnum = ["January","February","March"];
var select = document.querySelector('select');

function createOption(optionValue, index) {
  var option = document.createElement('option');
  option.value = index;
  option.innerHTML = optionValue;
  select.appendChild(option);
}

myEnum.map(createOption);

您可以在codepen 上查看更完整的示例

【讨论】：