如何使用 JavaScript 建立包含數組值的下拉列表

概述

要在不干擾網頁前端的情況下取得下拉清單中的選項，可以藉助陣列。與在陣列中一樣，我們可以儲存任意數量的選項或值。因此，無需直接將這些值放入 select 標記中程式碼的 HTML 部分，我們就可以從陣列中呈現它們，這樣可以輕鬆添加更多值，而不會幹擾頁面的使用者介面 (UI)。

方法

這是一種非常簡單的技術，透過使用這種技術，我們可以輕鬆地將選項值渲染到我們的清單中。透過使用數組，我們可以將所有 String 類型的值儲存在單一變數中，這將降低空間複雜度。我們還有許多函數，例如“for”、“foreach”、“map()”，透過使用這些函數，我們可以迭代數組並且可以渲染值。

文法

建立下拉清單的語法是 -

<select name="" id="">
   <option value=""></option>
   <option value=""></option>
</select>

演算法

第 1 步 − 建立 HTML 程式碼模板。要在 HTML 中建立下拉列表，我們使用 select 標籤建立下拉列表，並使用 option 標籤建立列表。

<select>
   <option></option>
   <option></option>
</select>

第 2 步 − 初始化一個數組，其中包含選項作為元素，並建立一個空 String 類型變數。

var arr = ["Courses here","Frontend Training","Backend Training","Java Training","Ethical Hacking"];

第 3 步 − 現在使用陣列的對應方法，它將陣列中的值對應到下拉清單的選項清單。使用串聯技術將選項連接到下拉清單。

arr.map((op,i)=>{
   options+=`<option value="${op}" id="${i}" style="border-radius: 5px;"">${op}</option>`
})

第 4 步驟 − 現在 options 變數包含陣列中的選項清單。將渲染值從陣列顯示到下拉清單中。

document.getElementById("arrayDropdown").innerHTML=options;

第 5 步−所有渲染的選項將顯示在下拉清單中並且可供使用。

範例

在此範例中，我們從陣列中呈現選項的值。使用 map() 函數，我們使用選項標記迭代了數組，並與 String 類型變數連接。我們使用 innerHTML() 方法將輸出顯示到 select 標記。

   


   
Dropdown list with array rendered options
   
   <script>
      var arr = [&quot;Courses here&quot;,&quot;Frontend Training&quot;,&quot;Backend Training&quot;,&quot;Java Training&quot;,&quot;Ethical Hacking&quot;];
      var options="";
      arr.map((op,i)=>{
         options+=`<option value="${op}" id="${i}" style="border-radius: 5px;"">${op}</option>`
      })
      document.getElementById(&quot;arrayDropdown&quot;).innerHTML=options;
   </script>

下圖顯示了上述範例的輸出。這只是為了告訴我們如何將陣列作為選項清單呈現到 HTML 中。所以如果你想讓它更具互動性，我們可以使用 bootstrap 元件，它可以讓樣式更加美觀。

結論

此方法是呈現下拉式清單選項值的最佳方法。這樣做的主要優點是它本質上是動態的，這使得操作陣列變得容易，這意味著我們可以輕鬆地從陣列中更新、新增或刪除選項。由於我們已經製作了一系列選項列表，因此它嚴格遵循「不要重複自己」(D-R-Y)。它作為一個元件可以在網頁上的任何位置呈現，只需開發一些使用者介面 (UI)。

以上是如何使用 JavaScript 建立包含數組值的下拉列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！