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

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.

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.

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();

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 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(); }
});

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"));