How do I check if value is empty?

Question

I have a few select menus that include blank options. When both are blank (usually on the first page load), I would like to show some hidden div.

This is what I have:

$('.variant_options select').each(function() { 
    if ($(this).attr('value') === '') {
        // some code here to show hidden div
        console.log("No options chosen");
    }
});

This doesn't seem to work.

Edit 1

For what it's worth, I have tried something like this:

if (!$(this).attr('value'))

And that has seemed to work, but it breaks functionality elsewhere.

if ($(this).prop('value') === '') or just if (!this.value) — Bergi
– Bergi, Commented Mar 26, 2013 at 10:39

marcamillion · Accepted Answer · 2013-03-26 11:03:09Z

5

<select> elements don't have a value attribute, so you need to use .val() on the element to find out if the currently selected option is empty.

if ($(this).val() === '') {
    // value of select box is empty
}

this.value === '' should also work

To check whether no options are selected:

if (this.selectedIndex == 0) {
    // no option is selected
}

edited Mar 26, 2013 at 11:03

marcamillion

33.9k57 gold badges200 silver badges395 bronze badges

answered Mar 26, 2013 at 10:37

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marcamillion Over a year ago

I like where you are going with this.selectedIndex == -1 but that doesn't work for me. That's actually the functionality I am looking for - if no select box value has been selected, then show some hidden div.

marcamillion Over a year ago

Or more specifically...on the first page load when it defaults to blank on both select menus, the top solution you have provided here works properly. However, if I chose a value for 1 (or both) of the options, then I go back to blank for both select menus, this no longer works. How can I get it to do this once it has returned to a 'blank' state - even after a value has been selected before? I suspect that this is where your selectedIndex value was going...which is why I would love to see more of it :)

dsgriffin · Accepted Answer · 2013-03-26 10:46:17Z

1

You can do so by using the following:

if($(this).val() === '') {
  // value is empty
}

I believe also the following too:

if(!$(this).prop('value')) { 
  // It's empty 
}

edited Mar 26, 2013 at 10:46

answered Mar 26, 2013 at 10:36

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

5 Comments

Bergi Over a year ago

He does use attr and it doesn't work. What do you mean by or, when to use what?

dsgriffin Over a year ago

@Bergi That was edited in to the question after I answered, I'll update.

marcamillion Over a year ago

Both of these work for 95% of the cases, i.e. on the first page load when it defaults to blank on both select menus, it does this properly. However, if I chose a value for 1 of the options, then I go back to blank for both select menus, this no longer works. How can I get it to do this once it has returned to a 'blank' state - even after a value has been selected before?

dsgriffin Over a year ago

Hmm.. what 'event' is this wrapped inside? (e.g. click, on etc.) do you have a jsFiddle by any chance?

marcamillion Over a year ago

Nvm....I got it. Thanks though! I updated Jack's answer to reflect the correct version.

palaѕн · Accepted Answer · 2013-03-26 10:53:39Z

1

You can simply do this:

$('.variant_options select').each(function () {
    if ($.trim($(this).val()) === '') {
        // some code here...
    }
});

answered Mar 26, 2013 at 10:53

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

3 Comments

palaѕн Over a year ago

In case, if you have spaces in options values

marcamillion Over a year ago

Oh...well I am only interested in the no-value case here...i.e. on the first load of the page, when the select options are blank (or when someone chooses the blank options).

marcamillion Over a year ago

Yes....that's interesting. A lot more code than just this.selectedIndex == 0, but that does achieve what I am looking for.

Jeff Shaver · Accepted Answer · 2013-03-26 10:37:59Z

0

jQuery can check for value by using $(this).val()

So you would do if ($(this).val === '')`

If you wanted to check for some other attribute, like href or src, you could do

if ($(this).attr('href') === ''

answered Mar 26, 2013 at 10:37

Jeff Shaver

3,35520 silver badges19 bronze badges

Comments

Mikhail Chernykh · Accepted Answer · 2013-03-26 10:43:24Z

0

In case if you have spaces, use this trick:

if ($.trim($(this).val()) === '') { ...

answered Mar 26, 2013 at 10:43

Mikhail Chernykh

2,69722 silver badges15 bronze badges

1 Comment

marcamillion Over a year ago

No spaces, because the values are in a pre-defined dropdown menu. I just want to detect if any of the select options have been selected (i.e. if the values are all undefined or blank, then the answer should be no and should show some hidden div).

Collectives™ on Stack Overflow

How do I check if value is empty?

5 Answers 5

2 Comments

5 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

5 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related