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>
