Element style changed using jquery.css is not updated in Chrome.

Question

I am updating the width of the select element using .css when the onchange event occurs. In HTML:

<select name="city_search" id="city_search" onchange='resetDropDown("#state_search");'> <select name="state_search" id="state_search" onchange='resetDropDown("#city_search");'> 

In js

 function resetDropDown(elementObj) { var selectBoxWidth = $(elementObj).attr('id') == 'college_search' ? 143 : 113; $(elementObj).css({width:selectBoxWidth}); } 

For some reason, the width of the attribute is correctly changed, but chrome does not display the changes until the element is checked or the page is refreshed. Is there a way to make chrome show the changes applied to the style of the element?

Thanks in advance. Elizabeth

Answer 1

This problem can be solved with the power of webkit to redraw / redraw style changes. You can refer to this answer: fooobar.com/questions/30524 / ...

Answer 2

A very simple solution for me. Try changing $(document).ready to $(window).load

The problem may be to prepare a document. If the function starts after Windows starts, it may work.

Answer 3

The OnChange event fires only when the object changes and the focus is weakened. You can use a workaround, for example, use the keyup event to enter text or the click event for checkboxes. Depending on the context of the selected change, you may need to manually trigger the change event. I suggest onclick instead of onchange to work for you if your select element changes when the user selects another option.