Search code examples
androidhtmlgoogle-chromedrop-down-menusamsung-mobile

dropdown menu on Chrome / Android (Samsung) fires event but does not refresh menu selection


My webapp works well on desktop browsers, and on Chrome on my Google Nexus 5, and also on the native browser for my Samsung, but when using the app with Chrome on the Samsung Galaxy (KitKat), the dropdown menu does not show the current selection. When the native dropdown option list opens, the correct current value is selected, but the menu on the main screen does not change until I re-orient the phone, and the app refreshes. I can see that the event is fired and the data changes correctly, it's just that the actual dropdown menu form does not show the correct value (until I turn the phone enough to resize the browser) ...

I have a second window in the app with two dropdown menus..in this case, when I select a new value in either dropdown, the other dropdown will update and show its current correct value! Again, I am only seeing this on Chrome on a Samsung, the dropdowns work fine with Chrome on my Google phone.

Ideas?

The HTML and Javascript is below:

        <select id="monthSelect" class="month">
            <option value="" disabled="" selected="selected">Month</option>
            <option value="0">Jan</option>
            <option value="1">Feb</option>
        </select>

        <select id="yearSelect" class="year"> 
            <option value="" disabled="" selected="selected">Year</option>
            <option value="0">2009</option>
            <option value="1">2010</option>
        </select>



$("#monthSelect, #yearSelect").on('change', function() {

   var monthVal = $("#monthSelect").val();
   var yearVal = $("#yearSelect").val();
   selectMonthVal = parseInt(monthVal);
   selectYearVal = parseInt(yearVal);

   checkStats();

});


Solution

  • well this seemed to be enough to force the dropdown to update:

    var yearText = $("#yearSelect option:selected").text();
    var monthText = $("#monthSelect option:selected").text();