# \<select>

[HTML](..) ⟩ [element]() ⟩ \<select>&#x20;

{% hint style="info" %}
The <mark style="color:purple;">**`<select>`**</mark> [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a control that <mark style="color:yellow;">provides a menu of options</mark>.
{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}
📁 html

```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

```javascript
// 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;
}
```
{% endtab %}

{% tab title="👥 相關" %}
* 可用 <mark style="color:purple;">**`<select>`**</mark> 來動態選擇 [flex](../../css/layout/display/flex "mention") 的排版方式。
{% endtab %}

{% tab title="📘 手冊" %}
* [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) ⟩ [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) ⟩ [\<select>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
{% endtab %}

{% tab title="💈範例" %}
* codepen ⟩ [flexbox (0.0.3) + dropdown lists](https://codepen.io/pegasusroe/pen/JoPWbbp)
{% endtab %}
{% endtabs %}
