Question

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

当一个或另一个不等于class="variations"或NULL时，我可以让它工作但是当我们两个都被选中时我似乎无法触发它（当两者都被选中时再次触发）未经选择，如果这是有道理的。）

Answer 1

你可以试试这个

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

DEMO.

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

当select选项的值不为空/ NULL时，jQuery会执行某些操作

4 个答案: