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);

希望這可以幫助。