概述
要在不干擾網頁前端的情況下獲取下拉列表中的選項，可以借助數組。與在數組中一樣，我們可以存儲任意數量的選項或值。因此，無需直接將這些值放入 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 標記。
<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)。
以上就是如何使用 JavaScript 創建包含數組值的下拉列表的詳細內容，更多請關注www.92cms.cn其它相關文章！
