Không sử dụng được phương thức .val() để lấy giá trị được chọn từ phần tử select khi dùng JQuery

Với hầu hết các phần tử input HTML, để lấy giá trị của chúng bằng JQuery, ta hay dùng phương thức .val(). Tuy nhiên, có một số phần tử không dùng được cách này, trong đó, select là một ví dụ.

Vấn đề này mình gặp khoảng 3 – 4 năm trước khi còn dạy lập trình web cho học viên. Lâu ngày bỏ, dạo gần đây có việc dùng lại mới nhớ, nên post lên đây cho các bạn nào gặp phải, cũng là cách để ghi chú lại cho mình.

Giả sử bạn có một hộp select như sau:

<select id="thanh_pho">
   <option value="HCM">Thành phố Hồ Chí Minh</option>
   <option value="HN">Hà Nội</option>
   <option value="DL">Đà Lạt</option>
   <option value="VT">Vũng Tàu</option>
</select>

Trong mã JavaScript, bạn cần sử dụng JQuery để lấy về giá trị (trong thuộc tính value) được chọn trong phần tử select#thanh_pho trên. Theo cách thông thường như với nhiều điều khiển input khác, bạn mong muốn sử dụng:

$("#thanh_pho").val()

Tuy nhiên, cách trên không làm việc. Lí do là vì phương thức .val() chỉ lấy giá trị từ thuộc tính value (của các phần tử input có thuộc tính này, ví dụ <input type=”text” value=”…” />). Nhưng như bạn thấy, phần tử select bản thân nó không có thuộc tính value, mà thuộc tính value này là của phần tử option con của select.

Vậy cách giải quyết như sau: khi một phần tử option con của select được chọn, phần tử option đó sẽ được tự động thêm vào thuộc tính selected (=”selected” nếu theo kiểu của XHTML, nhưng bạn không cần phải để ý việc đó), vậy hãy tìm ra phần tử option nào đang có thuộc tính selected rồi lấy giá trị của thuộc tính value của nó, vì option có thuộc tính value, nên sử dụng .val() cho option là hợp lệ.

Hãy sử dụng như sau:

$("#thanh_pho").find(":selected").val()
Tags:

Bình luận

Bình luận Facebook

lời bình luận