Test select tab

by hungqh87

HTML

<div>Lấy giá trị của 1 selectbox</div>

<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>

<button type="text" onclick="testSelect()">Select</button>
<br />
<br />
<div>Lấy giá trị của nhiều selectbox</div>

<select name="giaovien" class="giaovien" data-gv="văn">
<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="toán">
<option value="1">Phạm Văn Long</option>
<option value="2">Bùi Kim Huệ</option>
</select>
<button type="text" onclick="testSelectMulti()">Select</button>

JavaScript

function testSelect() {
  var sel = document.getElementById("sinhvien");
  var value = sel.value;
  var text = sel.options[sel.selectedIndex].text;
  alert("Sử dụng javascript  " + text + " có ID là: " + value);

  value = $("#sinhvien").find("option:selected").val();
  text = $("#sinhvien").find("option:selected").text();

  alert("Sử dụng Jquery - " + text + " có ID là: " + value);
}

function testSelectMulti() {
  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");
      alert("Giáo viên " + gv_type + " là: " + gv_name);
  }
}