下拉多選框的使用詳解

一、基本概念

下拉多選框通常作為表單輸入模塊的一種，其主要特點在於可以讓用戶在一個列表中選擇多個選項，這在普通的下拉框無法滿足用戶需求時非常有用。

在HTML中，下拉多選框的定義方式為<select multiple></select>，其中multiple屬性表示可以多選。

二、基本用法

下面我們來看一個基本的下拉多選框實現：

    <select multiple>
        <option value="option1">選項1</option>
        <option value="option2">選項2</option>
        <option value="option3">選項3</option>
    </select>

在上述代碼中，每個<option>標籤代表一個選項，其中value屬性表示選項的值，文本部分表示選項的顯示文本。

在選擇完成之後，通過JavaScript代碼可以獲取所有選中的選項的值，進行後續的操作。

三、進階用法

1、設置默認選項

由於下拉多選框可以有多個默認選項，因此需要設置selected屬性來指定每個默認選項。例如：

    <select multiple>
        <option value="option1" selected>選項1</option>
        <option value="option2">選項2</option>
        <option value="option3" selected>選項3</option>
    </select>

2、設置容器寬度和高度

下拉多選框通常會顯示出輸入內容，可以通過CSS樣式的設置，來控制容器的寬度和高度。例如：

    <select multiple style="width: 200px; height: 100px;">
        <option value="option1">選項1</option>
        <option value="option2">選項2</option>
        <option value="option3">選項3</option>
    </select>

3、設置禁用選項

有時候需要限制用戶對一些選項的使用，在這種情況下可以禁用某些選項。例如：

    <select multiple>
        <option value="option1" disabled>選項1</option>
        <option value="option2">選項2</option>
        <option value="option3" disabled>選項3</option>
    </select>

四、實例代碼

以下是一個完整的示例代碼，包括CSS樣式和JavaScript代碼：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>下拉多選框示例</title>
        
        <style>
            select {
                width: 200px;
                height: 100px;
                font-size: 16px;
            }
        </style>
        
        <script>
            function getSelectedOptions() {
                var selectedOptions = [];
                var select = document.getElementById("my-select");
                for(var i = 0; i < select.options.length; i++) {
                    if(select.options[i].selected) {
                        selectedOptions.push(select.options[i].value);
                    }
                }
                console.log(selectedOptions);
            }
        </script>
    </head>
    <body>
        <select multiple id="my-select">
            <option value="option1">選項1</option>
            <option value="option2">選項2</option>
            <option value="option3">選項3</option>
            <option value="option4" selected>選項4</option>
            <option value="option5" disabled>選項5</option>
        </select>
        <button onclick="getSelectedOptions()">獲取選中值</button>
    </body>
    </html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/195292.html