jQuery do something when select options' values are not empty/NULL

Question

Here's a scenario. Supposing I have multiple <select>'s on a page (can be 0,1,2,3,4 or more) and I want some piece of code to fire when the option values are not equal to "" or NULL. Is there a quick fire method in jQuery to find this? The selects will be in a <div> tag with class of class="variations" but no useful classes or id's for the selects themselves are present as they will be dynamically generated based on the current page/product id.

I can get it to work when one or the other is not equal to "" or NULL but I just can't seem to get it to fire when only both are selected (and then fire again when both are unselected, if that makes sense).

Just bind the change event to all the selects and then within it, check all the values. — j08691
– j08691, Commented Sep 3, 2013 at 20:07
Sounds good but how would I go about doing that? Like I said I can get it to fire when 1 is changed but not when they're all changed to something with a value other than "". — ScottMcGready
– ScottMcGready, Commented Sep 3, 2013 at 20:13
@ScottMcGready The event will fire every time any change occurs. Inside the handler, check the values of each of the selects to see if they are all selected. — Jason P
– Jason P, Commented Sep 3, 2013 at 20:16

The Alpha · Accepted Answer · 2013-09-03 20:17:35Z

6

You may try this

$('.variations').on('change', 'select', function(){
    if(this.value){
        // do something
    }
});

DEMO.

answered Sep 3, 2013 at 20:17

The Alpha

147k30 gold badges294 silver badges313 bronze badges

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

Comments

user1477388 · Accepted Answer · 2013-09-03 20:21:35Z

The answer posted by Sheikh is good, but this is another option:

http://jsfiddle.net/Jun5z/

HTML:

<select class="mySelect">
    <option value="">Please select an option</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select class="mySelect">
    <option value="">Please select an option</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<button class="myButton">Submit</button>

JavaScript:

$(document).ready(function(){
    $('.myButton').click(function() {
        $(".mySelect option:selected").each(function() {
            // do something if it's not empty
            if (this.value != '')
                console.log(this.text);
        });
    });
});

nordhagen · Accepted Answer · 2013-09-03 20:23:19Z

0

Slightly confused by your question, but would this be of any help?

var $selects = $('.variations > select')

// Attach event handler that will only fire once
$selects.one('change', checkSelectValues);

var checkSelectValues = function($event) {
  var numEmptySelects = 0;
  $selects.each(function(index, element){
    var val = $(element).val();
    if (val === '' || val == null) {
      numEmptySelects++;
    }
  });

  performActionBasedOnNumEmptySelects(numEmptySelects);

  // Re-attach event handler
  $selects.one('change', checkSelectValues);
};

var performActionBasedOnNumEmptySelects = function(numEmpty) {
  // Whatever....
};

answered Sep 3, 2013 at 20:23

nordhagen

8096 silver badges18 bronze badges

Comments

Jason P · Accepted Answer · 2013-09-03 20:27:15Z

0

If you only want something to occur when all are selected, or none are selected, you can use this:

http://jsfiddle.net/dK8yH/

$('.variations').on('change', 'select', function () {
    var allItems = $('.variations select');
    var nonSelectedItems = allItems.filter(function () {
        return $(this).val() === "";
    });

    if (nonSelectedItems.length == 0) {
        console.log('all are selected');
    } else if (nonSelectedItems.length == allItems.length) { 
        console.log('none are selected');   
    } else {
        console.log('some are selected');   
    }
});

answered Sep 3, 2013 at 20:27

Jason P

27k3 gold badges34 silver badges45 bronze badges

Collectives™ on Stack Overflow

jQuery do something when select options' values are not empty/NULL

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related