Cách lấy giá trị của select box trong HTML sử dụng javascript / JQuery

Hôm nay mình sẽ hướng dẫn các trường hợp cơ bản để lấy dữ liệu trong các tab select. Đây là các cách sử dụng javascript hết sức cơ bản cho người mới bắt đầu. Ta có đoạn HTML sau:

Các bạn có thể test trên jsFiddle

<select name="sinhvien" id="sinhvien">
<option value="1">Nguyễn Văn Tường</option>
<option value="2" selected>Lê Thị Mai</option>
<option value="3">Trần Quốc Chí</option>
</select>

Để lấy giá trị và nội dung (text) của tab Select mà được chọn (selected) ta có các cách sau:

Sử dụng Javascipt

var sel = document.getElementById("sinhvien");
var value = sel.value;
var text = sel.options[sel.selectedIndex].text;

Sử dụng JQuery

$("#sinhvien").find("option:selected").val()
$("#sinhvien").find("option:selected").val()

Phương thức find() như tên gọi của nó giúp tìm kiếm thành phần con (hay còn gọi là hậu duệ) bên trong DOM dựa trên các điều kiện như thành phần, JQuery object hoặc selector. Phương thức find() và .children() tương tự nhau.

Lấy nội dung, giá trị của nhiều selectbox có cùng tên

Ta có đoạn HTML sau:

<select name="giaovien" class="giaovien" data-gv="van">
<option value="1">Trần Kim Cúc</option>
<option value="2">Nguyễn Văn Toàn</option>
<option value="3">Nguyễn Hồng Ngọc</option>
</select>

<select name="giaovien" class="giaovien" data-gv="toan">
<option value="1">Phạm Văn Long</option>
<option value="2">Bùi Kim Huệ</option>
</select>

Bây giờ ta sẽ làm sao để lấy giá trị data-sv của 2 selectbox có tên là giaovien này và cộng vào string. Ta sẽ thực hiện bằng cách sau:

var giaoVien = $('select[name=giaovien]');
for (var i = 0; i < giaoVien.length; i++) {
    var gv_name = giaoVien.eq(i).find("option:selected").text();
    var gv_type = giaoVien.eq(i).attr("data-gv");
}

Ta sẽ sử dụng vòng lặp và thuộc tính eq() để lấy ra các giá trị mong muốn