Sự kiện thay đổi kích hoạt () khi đặt giá trị <select> 'với hàm val ()


132

Cách dễ nhất và tốt nhất để kích hoạt sự kiện thay đổi khi đặt giá trị của phần tử chọn .

Tôi đã mong đợi rằng việc thực thi mã sau đây

$('select#some').val(10);

hoặc là

$('select#some').attr('value',  10);

sẽ dẫn đến việc kích hoạt sự kiện thay đổi, mà tôi nghĩ là điều khá logic phải được thực hiện. Đúng?

Vâng, nó không phải là trường hợp. Bạn cần phải thay đổi sự kiện () bằng cách làm điều này

$('select#some').val(10).change();

hoặc là

$('select#some').val(10).trigger('change');

nhưng tôi đang tìm kiếm một số giải pháp sẽ kích hoạt sự kiện thay đổi ngay khi giá trị của select được thay đổi bởi một số mã javascript.


phần tử javascript thuần túy.addEventListener?
Manuel Bitto

4
$ ('chọn # some'). val (10) .change (); là khá nhiều ngay lập tức cho người dùng.
Dimitri

@Quản lý tôi đã thử nó. iv'e đã ​​sử dụng object.change = function (.... và object.addEventListener (... nhưng không có đối tượng.value, $ (object) .val () và $ (object) .attr ('value') sẽ kích hoạt người nghe đó
Goran Radulovic

Câu trả lời:


124

Tôi đã có một vấn đề rất giống nhau và tôi không chắc là bạn đang gặp vấn đề gì, vì mã đề xuất của bạn hoạt động rất tốt cho tôi. Nó ngay lập tức (một yêu cầu của bạn) kích hoạt mã thay đổi sau.

$('#selectField').change(function(){
    if($('#selectField').val() == 'N'){
        $('#secondaryInput').hide();
    } else {
        $('#secondaryInput').show();
}
});

Sau đó, tôi lấy giá trị từ cơ sở dữ liệu (cái này được sử dụng trên một biểu mẫu cho cả đầu vào mới và chỉnh sửa các bản ghi hiện có), đặt nó làm giá trị được chọn và thêm phần tôi bị thiếu để kích hoạt mã ở trên, ".change () ".

$('#selectField').val(valueFromDatabase).change();

Vì vậy, nếu giá trị hiện tại từ cơ sở dữ liệu là 'N', nó sẽ ngay lập tức ẩn trường đầu vào thứ cấp trong biểu mẫu của tôi.


Đây chính xác là những gì tôi cần. Cách tốt nhất để khám phá cách kích hoạt động các trình xử lý sự kiện DOM là gì? Liệu jQuery có tài liệu này tốt không? Cảm ơn bạn!
Con Antonakos

2
$ ("# discount_type") .val (2) .trigger ('thay đổi');
Satanand Tiwari

$ ('# add_itp_spt_parent_id'). val (add_fpt_val) .trigger ('thay đổi'); $ ('# add_itp_spt_parent_id'). change (); cả hai giải pháp đều không hoạt động.
Kam Meat

xác định chức năng thay đổi TRƯỚC KHI bạn đang sử dụng, giải quyết vấn đề của tôi. Cảm ơn.
Kam Meat

45

Một điều mà tôi phát hiện ra (một cách khó khăn), là bạn nên có

$('#selectField').change(function(){
  // some content ...
});

xác định TRƯỚC KHI bạn đang sử dụng

$('#selectField').val(10).trigger('change');

hoặc là

 $('#selectField').val(10).change();

4
Bài cũ nhưng điều này đã giải quyết vấn đề của tôi, đã cứu tôi khỏi một vết nứt não dài ngoằn ngoèo ... Bạn phải xác định người nghe trước khi sử dụng nó. Ngay cả trong JavaScript thuần túy.
Temitayo

Bạn có thể xây dựng một chút? Không phải là "thay đổi ()" là vì lý do này sao?
Dima R.

Vâng tôi sẽ nói có thể những người nghe thuộc loại này không được tải lên, Trong dự án của tôi, tôi đã gọi change()trước khi xác định người nghe và nó không hoạt động cho đến khi tôi chuyển change()cuộc gọi theo người nghe và nó đã hoạt động. Vâng, tôi sẽ nói rằng đây không phải là một vấn đề, nó chỉ là vấn đề về cách bạn cấu trúc mã của mình.
Temitayo

1
Đây là những gì tôi cần. Mất tôi mãi mãi để giải quyết vấn đề này, cảm ơn.
Jamie M.

Bravo !!! "chức năng thay đổi được xác định TRƯỚC KHI bạn đang sử dụng", đã giải quyết vấn đề của tôi. Cảm ơn thân yêu.
Kam Meat

17

Câu trả lời thẳng đã có trong một câu hỏi trùng lặp: Tại sao sự kiện thay đổi jquery không kích hoạt khi tôi đặt giá trị của lựa chọn bằng cách sử dụng val ()?

Như bạn có thể biết, việc đặt giá trị của lựa chọn sẽ không kích hoạt sự kiện thay đổi (), nếu bạn đang tìm kiếm một sự kiện được kích hoạt khi giá trị của một phần tử đã được thay đổi thông qua JS thì không có sự kiện nào.

Nếu bạn thực sự muốn làm điều này, tôi đoán cách duy nhất là viết một hàm kiểm tra DOM trên một khoảng thời gian và theo dõi các giá trị đã thay đổi, nhưng chắc chắn không làm điều này trừ khi bạn phải (không chắc tại sao bạn cần phải làm vậy)

Đã thêm giải pháp này:
Một giải pháp khả thi khác là tạo .val()chức năng trình bao bọc của riêng bạn và để nó kích hoạt một sự kiện tùy chỉnh sau khi đặt giá trị qua .val(), sau đó khi bạn sử dụng trình bao bọc .val () để đặt giá trị của <select>nó sẽ kích hoạt sự kiện tùy chỉnh của bạn mà bạn có thể bẫy và xử lý.

Hãy chắc chắn return this, vì vậy nó có thể kết nối theo kiểu jQuery


Tôi đã đọc một số diễn đàn về câu hỏi này và câu trả lời của bạn là sự hoàn thành cuối cùng mà tôi đang tìm kiếm. Ý tưởng theo dõi chỉ hoạt động như một thử nghiệm tinh thần, rõ ràng nó hoàn toàn không thực tế, nhưng nó mang tính minh họa; và ý tưởng của trình bao bọc là tuyệt vời, và cảm ơn bạn đã chỉ ra phần "trả lại cái này". Trân trọng.
David L

Tại sao không $('select').val(value).change()làm việc mọi lúc? Có lời giải thích rõ ràng nào không?
Istiaque Ahmed

2

Tôi tách nó ra, và sau đó sử dụng một so sánh danh tính để ra lệnh cho những gì sẽ làm tiếp theo.

$("#selectField").change(function(){
  if(this.value === 'textValue1'){ $(".contentClass1").fadeIn(); }
  if(this.value === 'textValue2'){ $(".contentclass2").fadeIn(); }
});

2

Vì jQuery sẽ không kích hoạt sự kiện thay đổi gốc mà chỉ kích hoạt sự kiện thay đổi của chính nó. Nếu bạn liên kết sự kiện mà không có jQuery và sau đó sử dụng jQuery để kích hoạt nó thì các cuộc gọi lại mà bạn bị ràng buộc sẽ không chạy!

Giải pháp sau đó giống như dưới đây (hoạt động 100%):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.