Question

I’m dealing with a storefront package (so I don’t have the option to edit core files) and we have dropdown menus to select which front and back the user wants for a business card. Some of the cards have only one option, so the client would like to hide the dropdown menu if there’s only one option.

Easy, right?

$("select").each(function(){
    var count = $(this).children("option").length;
    if ( count == 1 ) {
        // there's only one option, do something
    }
});

That works, but the problem is that the system sometimes generates a blank <option> for some of the dropdowns, so there’s really two options, but only one “real” option:

<select>
    <option></option>
    <option value="Something">A real option</option>
</select>

Basically, I need to select <select>s that only have one <option>, or two <option>s and one is just empty.

I can’t quite wrap my head around the logic of such an if statement, so if anyone has any suggestions, it would be greatly appreciated.

Answer 1

You can use not method and :empty selector:

$("select").each(function(){
    var count = $(this).find("option").not(':empty').length;
    if ( count == 1 ) {
        alert('okay')
    }
});

DEMO