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') === '')`](http://stackoverflow.com/q/5874652/1048572) or just `if (!this.value)` — Bergi, Mar 26 '13 at 10:39

score 5 · Accepted Answer · edited Mar 26 '13 at 11:03

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 '13 at 11:03

marcamillion

32,933
55
189
380

answered Mar 26 '13 at 10:37

Ja͢ck

170,779
38
263
309

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 Mar 26 '13 at 10:43
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 :) – marcamillion Mar 26 '13 at 10:59

dsgriffin · Answer 2 · 2013-03-26T10:46:17.390

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 '13 at 10:46

answered Mar 26 '13 at 10:36

dsgriffin

66,495
17
137
137

He does use `attr` and it doesn't work. What do you mean by *or*, when to use what? – Bergi Mar 26 '13 at 10:42
@Bergi That was edited in to the question after I answered, I'll update. – dsgriffin Mar 26 '13 at 10:43
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? – marcamillion Mar 26 '13 at 10:57
Hmm.. what 'event' is this wrapped inside? (e.g. click, on etc.) do you have a jsFiddle by any chance? – dsgriffin Mar 26 '13 at 11:01
Nvm....I got it. Thanks though! I updated Jack's answer to reflect the correct version. – marcamillion Mar 26 '13 at 12:29

score 1 · Answer 3 · answered Mar 26 '13 at 10:53

1

You can simply do this:

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

answered Mar 26 '13 at 10:53

palaѕн

72,112
17
116
136

In case, if you have spaces in options values – palaѕн Mar 26 '13 at 10:55
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 Mar 26 '13 at 10:56
1

Yes....that's interesting. A lot more code than just `this.selectedIndex == 0`, but that does achieve what I am looking for. – marcamillion Mar 26 '13 at 11:46

score 0 · Answer 4 · answered Mar 26 '13 at 10:37

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 '13 at 10:37

Jeff Shaver

3,315
18
19

score 0 · Answer 5 · answered Mar 26 '13 at 10:43

0

In case if you have spaces, use this trick:

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

answered Mar 26 '13 at 10:43

Mikhail Chernykh

2,659
22
15

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). – marcamillion Mar 26 '13 at 10:45

How do I check if value is empty?

5 Answers5