Jquery

Sự kiện change trong jquery .

Sự kiện change được sử dụng rất nhiều khi ta xử lý các vấn đề trong khi lập trình . Và mình sẽ giới thiệu với các bạn sơ lược về sự kiện này thông qua một ví dụ đơn giản .

Ở đây mình sẽ có 1 selectbox . Và khi mình chọn 1 giá trị tùy ý trong selectbox này thì ta sẽ lấy text của option trong selectbox đó ra và gán vào một div giống như hình bên dưới .

Và đề làm được như thế thì ta cần sử dụng sự kiện change trong jquery để không cho load lại trang mà vẫn lấy được dữ liệu cần thiết .

<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <select name="sweets" id='selecteid' multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>

    <option>Taffy</option>
    <option selected="selected">Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>

  </select>
  <div></div>
</body>
</html>

Đoạn jquery :

<script>
    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();
</script>

Nếu trong trường hợp có nhiều selectbox ta có thể sữ dụng id để phân biệt là mình đang cần dùng sự kiện change cho selecbox nào . Khi đó thì ta sẽ dùng :

<script>
    $("#selectedid").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();
</script>// 

Tương tự cho class …
Chúc các bạn may mắn !

Nguồn : http://api.jquery.com

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s