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

Question

这是一个场景。假设我<select>在一个页面上有多个 （可以是 0、1、2、3、4 或更多），并且我希望在选项值不等于""或时触发一些代码NULL。jQuery中是否有快速触发方法来找到它？选择将在一个<div>带有类的标签中，class="variations"但没有有用的类或选择本身的 ID，因为它们将根据当前页面/产品 ID 动态生成。

当一个或另一个不等于或 NULL 时，我可以让它工作，""但我似乎无法在只选择两者时触发它（然后在两者都未选择时再次触发，如果这有意义的话）。

Answer 1

你可以试试这个

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

演示。

Answer 2

Sheikh 发布的答案很好，但这是另一种选择：

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

Answer 3

你的问题有点困惑，但这有帮助吗？

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

Answer 4

如果您只希望在选择全部或未选择时发生某些事情，您可以使用：

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