資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 建立包含陣列值的下拉列表
概述
要獲取下拉列表中的選項，而不影響網頁的前端，可以使用陣列。在陣列中，我們可以儲存任意數量的選項或值。因此，無需直接將這些值放在程式碼的 HTML 部分的 select 標籤中，我們可以從陣列中渲染它們，這使得輕鬆新增更多值而無需干擾頁面使用者介面 (UI)。
方法
這是一種非常簡單的技術，使用這種技術，我們可以輕鬆地將選項值渲染到我們的列表中。透過使用陣列，我們可以將所有字串型別的值儲存在一個變數中，從而降低空間複雜度。我們還有許多函式，例如“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 − 使用選項作為元素初始化一個數組，並建立一個空的字串型別變數。
var arr = ["Courses here","Frontend Training","Backend Training","Java Training","Ethical Hacking"];
步驟 3 − 現在使用陣列的 map 方法，它將陣列中的值對映到下拉列表的選項列表。使用連線技術將選項連線到下拉列表。
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() 函式，我們迭代了帶有 option 標籤的陣列，並將其與字串型別變數連線起來。我們透過使用 innerHTML() 方法將輸出顯示到 select 標籤中。
<html>
<head>
<title>Create a dropdown with array rendered option</title>
</head>
<body>
<h2>Dropdown list with array rendered options</h2>
<select id="arrayDropdown" style="outline:none;padding: 0.4rem;border-radius: 5px; border: none; box-shadow: 0 0 10px rgb(202, 202, 202);margin: 0.8rem;"></select>
<script>
var arr = ["Courses here","Frontend Training","Backend Training","Java Training","Ethical Hacking"];
var options="";
arr.map((op,i)=>{
options+=`<option value="${op}" id="${i}" style="border-radius: 5px;"">${op}</option>`
})
document.getElementById("arrayDropdown").innerHTML=options;
</script>
</body>
</html>
下圖顯示了上述示例的輸出。這只是為了說明如何將陣列渲染到 HTML 中作為選項列表。因此，如果您想使它更具互動性，我們可以使用 Bootstrap 元件，它使樣式更美觀。
結論
此方法是渲染下拉列表選項值的最佳方法。其主要優點在於它是動態的，這使得操縱陣列變得容易，這意味著我們可以輕鬆地更新、新增或刪除來自陣列的選項。由於我們建立了一個選項列表陣列，因此它嚴格遵循“不要重複自己 (D-R-Y)”。它作為一個元件，可以透過開發一些使用者介面 (UI) 渲染在網頁上的任何位置。
8K+ 瀏覽量
