Thẻ <select> và <option> trong HTML

• Thẻ <select> và <option>
• Thẻ <optgroup>
• Thiết lập chọn được nhiều option
• Phát sinh dropdown list với PHP

Thẻ <select> trong HTML

Thẻ <select> và <option> trong HTML tạo ra một menu để chọn các tùy chọn, nó là một điều khiển control thường dùng như phần tử trong form HTML. Các phần tử (các mục menu) được biểu diễn bởi thẻ <option>

Hãy xem đoạn mã HTML sử dụng <select> / <option> sau đây:

<form action="https://httpbin.org/anything" method="post">
    <label for="lang-select">Bạn yêu thích ngôn ngữ lập trình nào:</label>
    <select name="lang" id="lang-select">
        <option value="">--Hãy chọn một ngôn ngữ lập trình--</option>
        <option value="csharp">C#</option>
        <option value="cpp">C++</option>
        <option value="php">PHP</option>
        <option value="ruby">Ruby</option>
        <option value="js">Javascript</option>
        <option value="dart">Dart</option>
    </select>
    <button type="submit">Gửi</button>
</form>

Kết quả là:

Như vậy để tạo ra một menu, một điều khiển danh sách thả xuống dropdown list ta dùng phần tử html <select> (trong form cần thiết lập thuộc tính name, tên phần tử).

Mỗi mục trong <select> được biểu diễn bởi phần tử <option> với cú pháp chính như sau:

<option value='giá-trị' >Nhãn-tên của mục</option>

Giá trị trong <option> nếu mục đó được chọn thì là giá trị của phần tử <select>, trong danh sách các <option> mặc định sẽ chọn <option> đầu tiên. Hoặc nếu phần tử <option> có thuộc tính selected thì khởi đầu sẽ chọn <option> đó. Ví dụ sau, Dart ban đầu được chọn

<label for="lang-select">Bạn yêu thích ngôn ngữ lập trình nào nhất:</label>
<select name="lang" id="lang-select">
    <option value="">--Hãy chọn một ngôn ngữ lập trình--</option>
    <option value="csharp">C#</option>
    <option value="cpp">C++</option>
    <option value="php">PHP</option>
    <option value="ruby">Ruby</option>
    <option value="js">Javascript</option>
    <option value="dart" selected>Dart</option>
</select>

Kết quả là:

Thẻ <optgroup> trong HTML

Thẻ <optgroup> (option group) dùng trong <select> để nhóm các option lại theo phân loại, theo chủ đề ... Cú pháp <optgroup> như sau:

<optgroup label="Tên nhóm">
    các <option> ...
</optgroup>

Nếu <optgroup> có thuộc tính disabled thì nhóm đó không chọn được.

Ví dụ:

<label for="tinh-thanh">Chọn tỉnh thành:</label>
<select id="tinh-thanh">
    <optgroup label="MIỀN BẮC">
        <option value="hn">Hà Nội</option>
        <option value="nd">Nam Định</option>
    </optgroup>
    <optgroup label="MIỀN NAM">
        <option value="hcm">TP. Hồ Chí Minh</option>
        <option value="bd">Bình Dương</option>
        <option>Apatosaurus</option>
    </optgroup>    
    <optgroup label="MIỀN TRUNG" disabled>
        <option>Thanh Hóa</option>
        <option>Nghệ An</option>
    </optgroup>
</select>

Nhóm MIỀN TRUNG không cho lựa chọn.

Chọn được nhiều mục trong <select> với thuộc tính multiple

Khi <select> bạn cho thêm thuộc tính multiple, lúc này bạn có thể chọn nhiều mục. Các trình duyệt trên Destop hầu hết hiện thị khi có tùy chọn này là một listbox, số mục hiện thị trong hộp listbox thiết lập thông qua thuộc tính size. Thao tác chọn / bỏ chọn bạn bấm chuột kết hợp với các phím CTRL, SHIFT. Khi form submit, nếu chọn nhiều thì tên select chứa mảng các giá trị chọn.

Ví dụ sau, cho phép chọn nhiều mục, số mục hiện thị của box là 6.

<form action="https://httpbin.org/anything" method="post">
    <label for="lang-select">Bạn yêu thích ngôn ngữ lập trình nào:</label>
    <select name="lang" id="lang-select" multiple size="6">
        <option value="">--Hãy chọn một ngôn ngữ lập trình--</option>
        <option value="csharp">C#</option>
        <option value="cpp">C++</option>
        <option value="php">PHP</option>
        <option value="ruby">Ruby</option>
        <option value="js">Javascript</option>
        <option value="dart">Dart</option>
    </select>
    <button type="submit">Gửi</button>
</form>

Kết quả là:

Ví dụ phát sinh dropdown với php

<?php
    $data = [
        '1'=>'An Giang',
        '2'=>'Bà Rịa – Vũng Tàu',
        '3'=>'Bạc Liêu',
        '4'=>'Bắc Giang',
        '5'=>'Bắc Kạn',
        '6'=>'Bắc Ninh',
        '7'=>'Bến Tre',
        '8'=>'Bình Dương',
        '9'=>'Bình Định',
        '10'=>'Bình Phước',
    ];
    
    echo'<select name="province">';
    foreach($data as $value => $lable){
        echo'<option value="'.$value.'">'.$lable.'</option>';
    }
    echo'</select>';
?>