CODEWITHSUNDEEP
javascriptjquery
ScottMcGready
ScottMcGready

Reputation: 1622

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

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

Upvotes: 0

Views: 4891

Answers (4)

Jason P
Jason P

Reputation: 27022

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');   
    }
});

Upvotes: 0

nordhagen
nordhagen

Reputation: 809

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

Upvotes: 0

user1477388
user1477388

Reputation: 21440

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

Upvotes: 1

The Alpha
The Alpha

Reputation: 146269

You may try this

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

DEMO.

Upvotes: 6

Related Questions