5

I am updating the width of a select element, using .css, when occurs an onchange event. 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 attribute width is correctly changed, but chrome does not show the changes until the element is inspected or page is refreshed. Is there a way to force chrome to show the changes applied on the element style?

Thanks in advance. Elizabeth

elizabethr
  • 53
  • 1
  • 1
  • 3

3 Answers3

9

This problem can be solved by force the webkit to redraw/repaint the style changes. You can refer to this answer: https://stackoverflow.com/a/3485654/567101

Community
  • 1
  • 1
Abhilash M A
  • 564
  • 5
  • 12
1

Very simple solution worked for me. Try to change $(document).ready to $(window).load

The problem may be on getting the document ready. If function runs once windows loads then it may work.

miken32
  • 42,008
  • 16
  • 111
  • 154
Prem Kumar Online - iPrem.in
  • 11
  • 2
0

OnChange event fires only when object changes AND loose focus. Your could use some workaround like using keyup event for text inputs or click event for checkboxes. Depending on a context of select change you may need to manually trigger change event. I suggest onclick instead of onchange should work for you if your select element changes when user chooses different option.

Artem Pianykh
  • 1,161
  • 1
  • 10
  • 23