Google Chrome for Android <select> element doesn't select any option

Question

I've a select element on my single page web app. The app has responsive design to work on mobile devices. Below is the link for development version.

http://mapcodexpublish.com/mcxwebdev/

Theselect element works well on all browsers but chrome for mobile. On chrome for android, when I thouch it shows the option list, but when select an option, it doesnt change at all. I've tried to alert something on change event but it wasn't fired.

I tired on real devices, but here is screenshots from an emulator. That's exact same.

Is there any one had similar problem or any idea to solve this wierd problem ?

Answer 1

The super hacky fix that seemed to work for me was to trigger a blur event on the select when it triggers a change. Something like:

$('select').change(function(){
  if (/Android/.test(navigator.userAgent)){
    $(this).blur();
  }
});

Really not proud of this "fix", but it works.