jQuery Chosen không bắn onchange sự kiện khi giá trị được thay đổi thông qua JS

Question

JSFiddle

tôi đã thiết lập một select với 3 option s (1 trống) trong fiddle. Khi tôi chuyển đổi từ foo sang bar theo cách thủ công, trình phát nghe change sẽ hoạt động bình thường.

Bây giờ nếu tôi thiết lập lại select qua JS với code posted in some answers here, sự kiện change không cháy cho các tùy chọn trống mới được lựa chọn, hơn nữa, nếu tôi chọn tùy chọn được chọn trước khi nhấn vào nút reset sự kiện onchange thắng' t cháy hoặc.

tôi chắc chắn rằng các select 'giá trị s là được thay đổi với chức năng ở trên, có thể được nhìn thấy trong fiddle này, nhưng select' s onchange sự kiện chỉ đơn giản là không cháy.

Tôi cũng đã thử onchange, onclick, oninput sự kiện không có kết quả. Ngay bây giờ tôi đang tự hỏi nếu tôi nên sử dụng một MutationObserver hoặc loại bỏ các yếu tố được chọn rendered từ DOM và tạo ra một, nhưng tôi có lẽ overthinking nó. Bất kỳ trợ giúp được đánh giá cao.

Ngoài ra:

Câu trả lời này đã giúp tôi rất nhiều: jQuery Chosen reset

Câu trả lời này không giúp: how to fire onchange event in chosen prototype javascript select box?

Mã để tham khảo trong tương lai nếu jsfiddle.net bị gỡ xuống:

HTML

<div id="wrapper"> 
    <select id="chosen"> 
     <option value="!!EMPTY VALUE!!"></option> 
     <option value="foo">foo</option> 
     <option value="bar">bar</option> 
    </select> 
</div> 
<br> 
<button id="reset">Reset</button> 

JS

$(function() { 
    $('#chosen').chosen(); 

    $('#wrapper').on('change', '#chosen', function() { 
     console.log('onchange: ' + this.value); 
    }); 

    $('#reset').click(function() { 
     $("#chosen").val('').trigger("liszt:updated"); //doesn't work 
     //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated"); //doesn't work either 
     console.log('reset: ' + $('option:selected').val()); 
    }); 
}); 

Answer 1

Bạn cần phải kích hoạt sự thay đổi sau khi bạn thay đổi giá trị với $(selector).trigger("change")

$('#reset').click(function() { 
     $("#chosen").val('').trigger("change"); //doesn't work 
     //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated"); 
     console.log('reset: ' + $('option:selected').val()); 
    }); 

Answer 2

Sao chép câu trả lời ra khỏi ý kiến ​​của Fabrício mờ mà làm việc cho tôi để những người khác don 't thấy bài đăng này và bỏ lỡ một giải pháp lúc đầu như tôi đã làm.

$('#chosen_chzn').remove(); 
$('#chosen').val('').change().removeClass('chzn-done').chosen(); 

See this on his Fiddle

tôi ban đầu đã cố gắng để tiếp tục sử dụng .trigger('liszt:updated') cuộc gọi thay vì .change() nhưng điều đó không làm việc. Không thấy lý do đằng sau .removeClass('chzn-done'), nhưng điều này cũng rất cần thiết hoặc hộp chọn của bạn sẽ biến mất.