🎛️<select>

HTML ⟩ element ⟩ <select>

The <select> HTML element represents a control that provides a menu of options.

💾 程式

📁 html

<!-- 用 <label> 包裝 <select> 的標籤文字與整個下拉式選單 -->
<label>
    <!-- <select> 標籤文字 -->
    flex-direction:
    <!-- <select> 下拉式選單 -->
    <select id="flexDirection">
        <option value="row">row</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
    </select>
</label>

📁 js

// 1. 先找出 id="flex-direction" 的 <select> 元素
const flexDirectionSelect = document.getElementById('flexDirection');

// 2. 監聽下拉式選單的變更
flexDirectionSelect.addEventListener('change', updateFlexbox);

// 3. 根據下拉式選單的變更，做相對應的反應(更新 flexbox style 屬性)
function updateFlexbox() {
    flexContainer.style.flexDirection = flexDirectionSelect.value;
}

👥 相關

• 可用 <select> 來動態選擇 flex 的排版方式。

📘 手冊

• HTML ⟩ Elements ⟩ <select>

💈範例

• codepen ⟩ flexbox (0.0.3) + dropdown lists