Drop downs greyed out instead of hidden when using jQuery-mobile

Question

I have some code that is used to hide text entry fields and drop downs under certain circumstances and all works fine on a normal browser, i.e. the label names and fields are hidden as required. This is my code segment:

function ShowHideLabels(val) {
if (val == 'show') {
    $('#card-holder').hide().attr('disabled', 'disabled');;
    $('#card-type').hide().attr('disabled', 'disabled');;
    $('#card-number').hide().attr('disabled', 'disabled');; 
    $('#card-expiry-month').hide().attr('disabled', 'disabled');;
    $('#card-expiry-year').hide().attr('disabled', 'disabled');; 
    $('#card-start-month').hide().attr('disabled', 'disabled');; 
    $('#card-start-year').hide().attr('disabled', 'disabled');;
    $('#card-issue-number').hide().attr('disabled', 'disabled');;
    $('#register-token').hide().attr('disabled', 'disabled');;
    $('div.ccinfo').find('label').each(function() {
        if ($(this).html()== '$card_holder' || $(this).html()=='$card_type' || $(this).html()=='$card_number' || $(this).html()=='$card_cv2_not_present' || $(this).html()=='$card_expiry_date' || $(this).html()=='$card_issue_number' || $(this).html()=='$card_start_number' || $('.tokenTooltip' , this).length) {
            $(this).addClass('CardsDisabledLabel');
            $(this).prev('br').addClass('CardsDisabledLabel');
        }
    });
} else {
    $('#card-holder').removeAttr('disabled').show();
    $('#card-type').removeAttr('disabled').show();
    $('#card-number').removeAttr('disabled').show();
    $('#card-expiry-month').removeAttr('disabled').show();
    $('#card-expiry-year').removeAttr('disabled').show();
    $('#card-start-month').removeAttr('disabled').show();
    $('#card-start-year').removeAttr('disabled').show();
    $('#card-issue-number').removeAttr('disabled').show();
    $('#register-token').removeAttr('disabled').show();
    $('.CardsDisabledLabel').removeClass('CardsDisabledLabel');
}

} });

The problem appears when viewing the site using a mobile template based on jQuery-mobile.

The labels get hidden and so does the text entry field, but the drop downs are still visible, just greyed out so they don't function.

I'm assuming this is because of the fact that the drop downs are given a class of "ui-select" when viewed through mobile because if i temporarily add display:none to the class they disappear. I've tried and failed to edit the show/hide code to also include the "ui-select" class. I was looking at appending something such as "selectHide" to the "ui-select" class but i can't get it to work.

Can you give me any suggestions or pointers on how you stop drop downs from displaying under jQuery-mobile?

I don't know why that happens -- but you can try removing the select options rather that hiding them --- ($(".element option[value='myoption']").remove();) -- and then append them back in -- http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery -- if you care about the order then the quickest way may be to rebuilt the options list — Tasos, Jul 25 '14 at 04:27

score 1 · Accepted Answer · answered Jul 26 '14 at 07:00

When select menus are enhanced by jQuery Mobile a <div> (and other stuff) is added. You have to target that element to hide the select.

To do that, just append -button to the id of your select in the selector (tested on jQM 1.4.2):

$("#my_select_id-button").hide();

...I have also a suggestion for your ShowHideLabels function: do not refer to each element separately to show/hide them, it's a method prone to error. Add a common class (cardElement) to each element, and work with a jQuery selector: $(".cardElement").hide();

Drop downs greyed out instead of hidden when using jQuery-mobile

1 Answers1