Ý kiến học viên

Giang

Giang

Khóa học chất lượng, sau khi học xong khóa HTML/CSS mình đã làm hoàn c...
  • - Phone : 0947502613
  • - Email : huonggiang.bct@gmail.com
Bùi Thu Hường

Bùi Thu Hường

Giảng viên hướng dẫn nhiệt tình, dễ hiểu. Chuẩn bị bài giảng của giảng...
  • - Phone : 01677692999
  • - Email : buithuhuong1107@gmail.com
Đặng Cao Sơn

Đặng Cao Sơn

Khóa học dễ hiểu, giảng viên nhiệt tình, nhiều tình bài tập tình huốn...
  • - Phone : 0938204886
  • - Email : soncshs1986@gmail.com
  • - Facebook : Xem
Viết đánh giá

Viết đánh giá

Về chất lượng đào tạo, website

Đánh giá của học viên

Ý kiến của học viên

Xem đánh giá của học viên về phpandmysql.net

jQuery form - Thao tác với select box

Thao tác với selectbox trong jquery cũng giống như thao tác trên PHP, Javascript thiên về hiệu ứng ta có thể nhìn thấy những gì xay ra ngay lập tức khi ta thao tác với một đối tượng. Còn với PHP thì phải qua một lần tải lại trang mới thấy sự thay đổi
Select box cũng giống như radio button, nó là một danh sách các giá trị được liệt kê sẵn cho người dùng chọn, một lúc ta chỉ có thể chọn một giá trị mà thôi

Ví dụ có một select box cho người dùng chọn giới tính
<select id="gender">
   <option value="None">-- Select --</option>
   <option value="Nam">Nam</option>
   <option value="Nữ">Nữ</option>
   <option value="Unknow">Không xác định</option>
</select>

1. Lấy giá trị đang được chọn
('#gender').val();

2. Lựa chọn giá trị Nữ
("#selectnu").click(function () {
    $("#gender").val("Nữ");
});

3. Disable giá trị Nữ

("#disablenu").click(function () {
     $("#gender option[value='Nữ']").attr("disabled", true);
}); 


Tương tự với các option khác, bạn thử thay đổi giá trị nhé


A. Đây là kết quả





B. Code demo


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery selectbox</title>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 // Lấy giá trị được chọn
    $("#isSelect").click(function () {
  alert($('#gender').val());
    });
 
  // Chọn Nam
    $("#selectnam").click(function () {
  $("#gender").val("Nam");
    });
 
  // Chọn Nữ
    $("#selectnu").click(function () {
  $("#gender").val("Nữ");
    });
 
 // Disable Nữ 
    $("#disablenu").click(function () {
  $("#gender option[value='Nữ']").attr("disabled", true);
    });
 
  // Enable Nữ
    $("#enablenu").click(function () {
  $("#gender option[value='Nữ']").attr("disabled", false);
    });
});
</script>
</head>
 
<body>
<h1>jQuery thao tác với select box</h1>
<form action="">
<select id="gender">
   <option value="None">-- Select --</option>
   <option value="Nam">Nam</option>
   <option value="Nữ">Nữ</option>
   <option value="Unknow">Không xác định</option>
</select>
<br>
<br>
<br>
<input type='button' value='Lấy giá trị được chọn' id='isSelect'>
<input type='button' value='Chọn Nam' id='selectnam'>
<input type='button' value='Chọn Nữ' id='selectnu'>
<input type='button' value='Disable Nữ' id='disablenu'>
<input type='button' value='Enable Nữ' id='enablenu'>
</form>
</body>
</html>


- Xem demo online
Bạn vẫn chưa hiểu vấn đề, bạn cần người trợ giúp?. Hãy click vào đây để gửi câu hỏi, mọi người sẽ support cho bạn