jQuery find option in Select with empty/null value remove it and select the first option after it with a value

Question

All in all I want to remove any and all empty options from a SELECT input. The select is dynamically generated from a script someone else wrote, based on an object it receives. My problem is sometimes the object has empty values, leaving me with a select option set that leaves something to be desired.

Anyway almost every time the first option in the set is empty. So I want to remove that and apply selected="selected" to the first option that comes up after the first one is removed., while removing any other possibilities that have empty values.

So in testing the initial concept I came up with

$(select).each(function(){
                if ($(this+' option:selected').val() == '')
                {
                    //this assumes that your empty value is ''
                    $(this).remove();
                }
            });

which seems to remove the entire select, and I know its cause this is defined as the select itself.

I've also tried $(select +'option[value=""]').remove();

Currently I am only trying to get it to remove the options with the empty values, after I can achieve that then I will figure out how I to select the first item on the list officially as far as the DOM would be concerned.

also worth mentioning 'select' the variable being passed is defined previously in the function so it is working for that part of the notion. Just sayin so no one thinks I am some how confusing it with something else.

Answer 1

• you can use .filter() to filter out the empty option elements and remove them all at once

• use .prop() to set special attributes like selected

Code:

$('select option')
    .filter(function() {
        return !this.value || $.trim(this.value).length == 0;
    })
   .remove();

$('select option')
    .first()
    .prop('selected', true);​

DEMO