Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ option trong HTML, đây là thẻ đi kèm với thẻ select để tạo ra các tùy chọn trong danh sách.

Thẻ option sẽ tạo ra một tùy chọn trong danh sách các tùy chọn của thẻ <select>.

Sử dụng thẻ <option> bên trong cặp thẻ <select> hoặc <datalist>.

Lưu ý:

• Thẻ <optton> có thể sử dụng mà không cần bất cứ thuộc tính nào. Tuy nhiên, nếu bạn muốn gửi những dữ liệu đã chọn đến server thì bạn cần phải dùng đến thuộc tính value.
• Nếu bạn có quá nhiều options, có thể sử dụng thẻ <optgroup>.

1. Cách sử dụng thẻ option trong HTML

Ví dụ: Sử dụng option để tạo các tùy chọn trong danh sách các khóa học tại web888.vn.

<select>
    <option>PHP</option>
    <option>Javascript</option>
    <option>HTML-CSS</option>
    <option>Database</option>
    <option>Lập trình mobile</option>
</select>

Mỗi khóa học nằm trong một cặp thẻ <option>, khi chọn option nào thì giá trị của option đó sẽ là giá trị của thẻ <select>.

2. Thuộc tính của thẻ option trong HTML

Dưới đây là một thuộc tính thường dùng trong thẻ select.

• disabled – vô hiệu hóa option, nó vẫn sẽ hiển thị nhưng không cho người dùng chọn.
• label – đặt một label ngắn cho option.
• selected – nếu option nào có thuộc tính này, nó sẽ là giá tị mặc định được chọn sau khi tải trang.
• value – giá trị của option, cũng là giá trị của select nếu option đó được chọn.

Ví dụ: sử dụng thuộc tính value và selected của thẻ option. khi submit sẽ alert ra giá trị của select.

<form>
    <select id="select">
        <option value="php">PHP</option>
        <option value="js">Javascript</option>
        <option value="html/css" selected="selected">HTML-CSS</option>
        <option value="db">Database</option>
        <option value="mobile">Lập trình mobile</option>
    </select>
    <input type="submit" name="Submit" onclick='alert(document.getElementById("select").value)'>
</form>

3. Thêm CSS cho thẻ option html

Chúng ta rất ít khi sử dụng CSS cho các thẻ option. Tuy nhiên, nếu bạn muốn style cho nó thì hãy sử dụng cách sau:

option{
    color:red
}

Hoặc bạn đặt một ID / Class cho nó rồi sử dụng truy vấn selector nhé.