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).

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).

• javascript
• jquery

• 3 Could you provide your code, preferably in jsfiddle? – IgnasK Commented Sep 3, 2013 at 20:07
• 2 Just bind the change event to all the selects and then within it, check all the values. – 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 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 Commented Sep 3, 2013 at 20:16

4 Answers 4

You may try this

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

DEMO.

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

http://jsfiddle/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);
        });
    });
});

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....
};

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

http://jsfiddle/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');   
    }
});