HTML5: <select>

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Thẻ <select> dùng để thiết lập một menu chọn cho phép chọn một mục hoặc nhiều mục. Nếu muốn tạo menu chọn nhiều mục bạn chỉ cần sử dụng thêm thuộc tính multiple cho thẻ <select>.

Cú pháp:

<select>

<option>Lựa chọn 1</option>

<option>Lựa chọn 1</option>

<option>Lựa chọn 1</option>

<option>Lựa chọn 1</option>

<option>Lựa chọn 1</option>

...

</select>

Ví dụ về menu chọn một mục:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: Menu chọn 1 mục</title>
</head>

<body>
<form>
    <label for="ngonngu">Mời chọn một ngôn ngữ:</label>
    <select id="ngonngu" name="ngonngu">
        <option hidden>--Chọn 1 ngôn ngữ--</option>        
        <option>Ngôn ngữ C</option>        
        <option>HTML5</option>        
        <option>CSS3</option>        
        <option>JavaScript</option>        
        <option>jQuery</option>        
        <option>SQL</option>        
        <option>PHP</option>    
    </select>
    <input type="submit" value="Gửi">
</form>
</body>
</html>

 

Ví dụ về menu chọn nhiều mục:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: Menu chọn nhiều mục</title>
</head>

<body>
<form>
    <label for="ngonngu">Mời chọn những ngôn ngữ bạn thích (nhấn giữ phím Ctrl và chọn):</label>
    <select id="ngonngu" name="ngonngu" multiple>
        <option hidden>--Chọn 1 ngôn ngữ--</option>    
        <option>Ngôn ngữ C</option>    
        <option>HTML5</option>    
        <option>CSS3</option>    
        <option>JavaScript</option>    
        <option>jQuery</option>    
        <option>SQL</option>    
        <option>PHP</option>
    </select>
    <input type="submit" value="Gửi">
</form>
</body>
</html>

 

Trong DOM

Trong DOM thì thẻ <select> có thuộc tính selectedIndex dùng để lấy chỉ số của <option> đã được chọn. Ví dụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: Menu chọn 1 mục</title>
</head>

<body>
<form>
    <label for="ngonngu">Mời chọn một ngôn ngữ:</label>
    <select id="ngonngu" name="ngonngu" onChange="alert('Chỉ số của option đã chọn: '+selectedIndex);">
        <option hidden>--Chọn 1 ngôn ngữ--</option>        
        <option>Ngôn ngữ C</option>        
        <option>HTML5</option>        
        <option>CSS3</option>        
        <option>JavaScript</option>        
        <option>jQuery</option>        
        <option>SQL</option>        
        <option>PHP</option>    
    </select>
    <input type="submit" value="Gửi">
</form>
</body>
</html>

 

Trong DOM thì <select> cũng có một thuộc tính mảng là options, options đại diện cho tất cả các thẻ <option> của <select>. Nếu ban muốn lấy giá trị của một <option> nào đó thì bạn chỉ cần làm như sau: options[selectedIndex].value hoặc options[selectedIndex].text. Ví dụ:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo thẻ select-option: options</title>
</head>

<body>
<form>
    <label for="ngonngu">Mời chọn một ngôn ngữ:</label>
    <select id="ngonngu" name="ngonngu" onChange="alert('Ngôn ngữ bạn đã chọn: '+options[selectedIndex].value);">
        <option hidden>--Chọn 1 ngôn ngữ--</option>
        <option>Ngôn ngữ C</option>
        <option>HTML5</option>
        <option>CSS3</option>
        <option>JavaScript</option>
        <option>jQuery</option>
        <option>SQL</option>
        <option>PHP</option>
    </select>
    <input type="submit" value="Gửi">
</form>
</body>
</html>

 
» Tiếp: <sub> & <sup>
« Trước: <p>
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!