資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 選擇下拉列表中的多個選項？
在本教程中，我們將學習如何使用 JavaScript 選擇下拉列表中的多個選項。基本上，我們將建立兩個按鈕，一個是下拉按鈕，其中我們提供多個選項，另一個是連線到multiFunc()函式的普通按鈕，並帶有下拉按鈕的 id，當我們點選此按鈕時，我們就可以在下拉按鈕中選擇多個選項。
在本教程中，我們使用了 JavaScript 的兩個屬性，一個是 DOM 屬性，即document.getElementById，另一個是用於一次選擇多個選項的 multiple 屬性。
語法
現在讓我們來看一下使用 JavaScript 選擇下拉列表中多個選項的語法：
function multipleFunc() {
document.getElementById("mySelect").multiple = true;
}
在上述語法中，我們得到了函式名稱“multipleFunc”。顧名思義，此函式允許我們一次選擇多個選項。在此函式中，我們使用 DOM，使用具有 multiple 屬性的下拉按鈕的 id 並將其設定為 true。並且此“multipleFunc”連線到一個普通按鈕，因此當我們點選此按鈕以啟用“multipleFunc”函式以在下拉按鈕中選擇多個選項時。
演算法
我們上面已經看到了使用 JavaScript 選擇下拉列表中多個選項的語法，現在我們將逐步檢視完整的步驟：
步驟 1 - 首先，我們建立一個表單，在其中使用 HTML 的 select 標籤建立一個下拉按鈕，並帶有其自己的 id，並且在 select 標籤中，我們必須在 HTML 程式碼的主體中建立多個選項。
步驟 2 - 在表單中，在下拉按鈕之後，我們使用 input 標籤建立另一個按鈕，並使用 type、onclick 和 value 屬性，這些屬性透過onclick屬性連線到“multiFunc”函式，以允許我們一次在下拉按鈕中選擇多個選項。
步驟 3 - 在按鈕的onclick屬性中，我們必須傳遞multipleFunc，當我們點選此按鈕時，它將呼叫此函式。
步驟 4 - 在 script 標籤中，我們必須定義一個multiFunc，在其中我們必須使用 javascript 的 DOM 屬性，即document.getElementById，在其中我們必須傳遞下拉按鈕的 id。
步驟 5 - 然後進一步，我們使用 JavaScript 的 multiple 屬性並將其設定為 true，這有助於使用者一次選擇多個選項。
我們已經看到了使用 JavaScript 選擇下拉列表中多個選項的語法和演算法，現在讓我們舉一個例子來實現上面討論的步驟。
示例
在這個例子中，我們將使用一個表單，其中包含一個下拉按鈕和一個連線到 multipleFunc 的普通按鈕，然後藉助 JavaScript 屬性，我們就可以在下拉列表中選擇多個選項。
<!DOCTYPE html> <html> <body> <form id="myForm"> <select id="mySelect"> <option>One</option> <option>Two</option> <option>Three</option> </select> <input type="button" onclick="multipleFunc()" value="Select multiple options"> </form> <p>Press CTRL and click the above button to select multiple options at once.</p> <script> function multipleFunc() { document.getElementById("mySelect").multiple = true; } </script> </body> </html>
在上面的程式碼中，我們首先建立一個表單，在其中建立兩個按鈕。第一個是使用 HTML 的 select 標籤建立的下拉按鈕，並帶有其自己的 id，第二個是使用 input 標籤建立的普通按鈕，在其中我們傳遞 type、onclick 和 value。當我們點選第二個按鈕時，它會呼叫函式“multiFunc”，它透過 onclick 函式連線。multiFunc是為允許使用者一次選擇多個選項而建立的，因此在此函式中，我們使用 DOM 屬性document.getElementById和下拉按鈕的 id，以及 'multiple' 屬性，並將其賦值為 'true'。
您可以看到輸出影像，在第一張影像中，選項下拉按鈕和普通按鈕，但我們無法一次在下拉按鈕中選擇多個選項，然後我們點選選擇多個選項按鈕，我們就可以在下拉按鈕中選擇多個選項，如您在第二張圖片中看到的。
結論
在本教程中，我們學習瞭如何使用 javascript 選擇下拉列表中的多個選項。此外，我們學習瞭如何使用 input 建立一個帶有下拉按鈕和普通按鈕的表單，並透過 onclick 屬性連線到 'multipleFunc' 函式，在該函式中，我們使用 javascript 的 dom 屬性“document.getElementById”和 javascript 的 multiple 屬性，該屬性允許我們一次選擇多個選項。
11K+ 瀏覽量
