I have met a problem when adding an option into a select box. This select box could be created/cloned dynamically using JQuery dynamic form. The problem only occurs on Internet Explorer, where some of select boxes will not get updated, which means that newly added option will not be visible for user. Actually, the problem is, the DOM has been updated correctly, only the UI-rendering process was failed.

Well, this looks very strange, but the solution is very simple. The idea is to force Mr.IE to re-render our select boxes, by hiding, and showing them:

// hide and show comboboxes, to solve an UI-render issue in IE, where DOM has been updated, but not UI
$container.find("select.addressBox").append("Hello Mr.IE").hide().show();

Vấn đề mình gặp phải là khi chèn thêm thẻ option vào trong select box. Select box này có thể được generate động bằng JQuery dynamic form. Vấn đề chỉ xảy ra trên Internet Explorer, khi mà một vài select box không được update, không hiển thị option mới được chèn vào. Thực ra thì DOM của các select box này đã được update, vấn đề là IE không render đúng các select box này.

Để khắc phục vấn đề này, bằng cách ép IE phải render lại các select box này, mình ẩn, và hiện các select box này:

// hide and show comboboxes, to solve an UI-render issue in IE, where DOM has been updated, but not UI
$container.find("select.addressBox").append("Hello Mr.IE").hide().show();