資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究如何使用JavaScript建立下拉列表？
下面我們將學習如何使用HTML和JavaScript建立一個下拉列表。在開始本文之前，讓我們瞭解一下下拉列表以及為什麼需要使用它。
下拉列表為使用者提供了多個選擇，並允許他們從所有選項中選擇一個值。但是，我們可以使用多個單選按鈕來做同樣的事情，但是如果我們有數百個選擇呢？然後我們可以使用下拉選單。
當用戶點選下拉按鈕時，它會開啟所有選擇，使用者可以選擇任何一個。此外，下拉選單比單選按鈕提供更好的使用者體驗。
使用<select>和<option>標籤建立下拉列表
HTML的<select>標籤允許我們建立一個下拉列表。我們可以使用<select>標籤向下拉列表新增選項。
語法
使用者可以按照以下語法使用<select>和<option> HTML標籤建立一個下拉選單。
<select id = "dropdown" onchange = "selectOption()">
// add options here
</select>
<script>
function selectOption() {
let selectedValue = dropdown.options[dropdown.selectedIndex].text;
}
</script>
在上面的語法中，我們使用<script>標籤的selectedIndex屬性獲取所選選項的索引，並根據索引獲取選項的詳細資訊。
示例
在下面的示例中，我們為汽車品牌建立了下拉選單。此外，我們還編寫了JavaScript程式碼來從下拉選單中獲取選定的值。“onchange”事件將在使用者選擇新值並呼叫selectOption()函式時觸發。
此外，我們還為預設的下拉選單提供了一些CSS樣式。此外，我們還隱藏了下拉選單的箭頭以改進它。在CSS中，使用者可以看到他們如何自定義預設的下拉選單。
<html>
<head>
<body>
<h2>Using the <i> select and option HTML tag </i> to create a dropdown list in JavaScript</h2>
<h3>Choose any car from below dropdown list.</h3>
<select id = "dropdown" onchange = "selectOption()">
<option>BMW</option>
<option>Range Rover</option>
<option>Mercedes</option>
<option>Honda city</option>
<option>Verna</option>
<option>Tata Safari</option>
</select>
<br><br>
<div id = "output">The selected value is BMW.</div>
<script>
let output = document.getElementById('output');
function selectOption() {
let dropdown = document.getElementById('dropdown');
// get the index of the selected option
let selectedIndex = dropdown.selectedIndex;
// get a selected option and text value using the text property
let selectedValue = dropdown.options[selectedIndex].text;
output.innerHTML = "The selected value is " + selectedValue;
}
</script>
</body>
</html>
使用<div> HTML標籤建立下拉列表
我們可以使用普通的HTML、CSS和JavaScript從頭開始建立一個下拉選單。我們可以使用HTML製作下拉選單，使用CSS對其進行適當的樣式設定，並使用JavaScript新增行為。
步驟
使用者可以按照以下步驟使用HTML、CSS和JavaScript建立一個下拉選單。
步驟1 - 建立一個用於下拉標題的div元素，並使用CSS對其進行樣式設定。我們建立了帶有“menu-dropdwon”類的div元素。
步驟2 - 建立一個帶有“dropdown-list”類的div元素以新增下拉選項。
步驟3 - 為帶有“dropdown-list”類的div設定樣式，並在<p>標籤格式中新增選項。還要設定div的<p>HTML元素的樣式。
步驟4 - 現在，使用JavaScript為我們的下拉選單新增行為。
步驟5 - 在帶有類名“menu-dropdwon”的div上新增onclick事件。當用戶點選div時，還要呼叫openDropdown()函式。
步驟6 - 在openDropdown()函式中，訪問帶有類名“dropdown-list”的div元素，並使用display屬性顯示它（如果它是隱藏的）或隱藏它（如果它是可見的）。
步驟7 - 現在，使用JavaScript為每個<p>標籤新增點選事件，為此，使用for迴圈。
步驟8 - 在事件監聽器的回撥函式內，顯示單擊元素的innerHTML，並透過將display更改為none來隱藏下拉選單。
示例
在下面的示例中，我們按照上述步驟從頭開始建立了一個下拉選單。在輸出中，使用者可以觀察到，當他們點選下拉標題時，它會開啟，當他們再次點選時，它會關閉。此外，當他們點選任何選項時，它會選擇該選項並在顯示器上呈現。
<html>
<head>
<style>
.menu-dropdown {
width: 10rem;
height: 1.8rem;
font-size: 1.5rem;
background-color: aqua;
color: black;
border: 2px solid yellow;
border-radius: 10px;
padding: 2px 5px;
text-align: center;
justify-content: center;
cursor: pointer;
}
.dropdown-list {
display: none;
z-index: 10;
background-color: green;
color: pink;
font-size: 1.2rem;
width: 10.5rem;
border-radius: 10px;
margin-top: 0rem;
cursor: pointer;
}
.dropdown-list p {
padding: 3px 10px;
}
.dropdown-list p:hover {
background-color: blue;
}
</style>
</head>
<body>
<h2>
Using the <i> div and p tag </i> to create a dropdown list in JavaScript.
</h2>
<h3>Choose any value from below dropdown list.</h3>
<div id = "output">The selected value is none</div>
<br>
<!-- whenever we select the value, it will invoke the selectOption() function -->
<div class = "menu-dropdown" onclick = "openDropdown()">
Choose Value
</div>
<div class = "dropdown-list" id = "list">
<p>First option</p>
<p>Second option</p>
<p>Third option</p>
<p>Fourth option</p>
<p>Fifth option</p>
<p>Sixth option</p>
<p>Seventh option</p>
</div>
<script>
let output = document.getElementById('output');
let dropdownList = document.getElementById("list");
dropdownList.style.display = "none";
function openDropdown() {
if (dropdownList.style.display != "none") {
dropdownList.style.display = "none";
} else {
dropdownList.style.display = "block";
}
}
const p_elements = document.getElementsByTagName("p");
// access all p elements
const totalP = p_elements.length;
// iterate through all <p> elements
for (let i = 0; i < totalP; i++) {
const option = p_elements[i];
// add event listner to <p> element
option.addEventListener("click", () => {
// When a user clicks on any p element, get its innerHTML
output.innerHTML = "The selected option is " + option.innerHTML;
// close the dropdown list once users select an option
dropdownList.style.display = "none";
})
}
</script>
</body>
</html>
使用者學習了兩種不同的建立下拉選單的方法。一種使用<select>和<option>標籤，這是HTML中的預設選擇選單；另一種只使用HTML、CSS和JavaScript。
13K+ 次瀏覽
