CODEWITHSUNDEEP
jqueryjquery-mobile
Blu
Blu

Reputation: 4056

Dropdown not show selected value only in mobile devices

I have a select menu with different options. I want to select its option dynamically on the basis of current time. for that i am using following code

var currentdate = new Date();
var h = currentdate.getHours();
var m = currentdate.getMinutes();
if(m >= 1 && m <= 15)
{
    m = '00';
}
else if(m >= 16 && m <=44)
{
    m = '30';
}
else if (m >= 45)
{
    h++;
    m = '00';
}
if(h < 12)
{
    var time = h+":"+m+" AM";
    $("#kill-time option").each(function() {
        if($(this).text() === time) {
            $(this).attr('selected', 'selected');
        }                   
    });
    $('#kill-time').selectmenu('refresh',true);
}
else
{
    h = h - 12;
    if(h < 10)h="0"+h;
    var time = h+":"+m+" PM";
    $("#kill-time option").each(function() {
        if($(this).text() === time) {
            $(this).attr('selected', 'selected');
        }                   
    });
    $('#kill-time').selectmenu('refresh',true);
}

It updates the value and also display correct value (in Desktop Browsers) and in mobile browser it it displays like this

enter image description here

I created JSFiddle also and check in mobile browser and it have same issue

(I want to change on the basis of text not by using values)

Upvotes: 0

Views: 224

Answers (1)

Dean Meehan
Dean Meehan

Reputation: 2646

Think I got it sorted. I changed two things on your code. One the HTML for the times around 12 where wrote as pM instead of PM.

Also your JS converts time from 24 hour at 12 to 0, when in fact we say 12:00 for Noon and then 1:00 for 1PM so i've simply added another condition.

if(h!==12){
    h = h - 12;
}

I have tested this using Google Dev Tools Emulation on Google Nexus S, iPhone 5 and Windows Phone and seems to be working fine.

From the docs

selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

You will then have to change any attr() referring to any of the above elements and change them to

$(this).prop('selected',true);

JSFiddle

Upvotes: 1

Related Questions