html5表单下拉菜单，其中包含javascript或jquery中的菜单项？

Question

我已经将此表单设置为基本的下拉菜单，可以立即转到选择了哪个链接/选项，但是我想知道是否有可能/如何将JavaScript中的所有选项附加到单独的文件中？ 我刚刚开始学习JavaScript，因此任何解释也将非常有用。 感谢您的时间！

<form name="nav">
    <select name="navigation" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" style="width:100%;">
        <option selected="selected">go to...</option>
        <option value="index.html">PROJECTS</option>
        <option value="about.html">ABOUT</option>
    </select>
</form>

Answer 1

这是一个演示开始

HTML

<form id="my-form">
  <select name="navigation">
    <option>Go to...</option>
  </select>
</form>

现在，我们只是将导航选项编码为JSON对象，然后将其动态加载到select元素中

var navigation = [
  {"title": "PROJECTS", url: "index.html"},
  {"title": "ABOUT", url: "about.html"}
];

var select = document.getElementById("my-form").navigation;

for (var i=0, option; i<navigation.length; i++) {
  option = document.createElement("option");
  option.value = navigation[i].url;
  option.innerText = navigation[i].title;
  select.appendChild(option);
}

select.addEventListener("change", function(event) {
  window.location.href = select.value;
});

这是原始的JavaScript，但如果您更喜欢jQuery，则可以使用jQuery。

Answer 2

我不知道您知道多少JS或您正在使用哪个框架（服务器，客户端）。 但是无论如何，您都可以例如尝试使用服务器发送的内容在此处构建导航。

例如，您在客户端生成了一个请求，您希望将导航动态地加载到此select中，并在成功ajax中填充下拉列表。

写更多关于您正在使用的框架的信息。 是JS纯JS还是jQuery。

顺便说一句。 您发布的代码并不完全是构建下拉列表的HTML5方法。 转到HTML5表单元素，并使用第一个示例

<input list="browsers">

Answer 3

你可以这样做：

var str = '<option selected="selected">go to...</option>'+
          '<option value="index.html">PROJECTS</option>'+
          '<option value="about.html">ABOUT</option>';
$('#formId').html("");
$('#formId').append(str);

希望这可以帮助。