从选择下拉列表运行代码中选择两个选项后，jQuery

Question

I have 2 select drop down menus. I want to to add a class once a option has been selected from both menus.

    $('#size').change(function(){ 
        if ($(this).val() > 0 )  {
              $('#pizza').addClass('pizzaImage');
         }  

    });

    $('#crust').change(function(){ 
        if ($(this).val() > 0 ) {
              $('#pizza').addClass('pizzaImage');
         }  


    });

This is my code so far, it works when I select an option from one. Basically I want to put these together I just don't know the syntax to do so. I also tried this but no results.

var size = $('#size')
var crust = $('#crust')

function image () {
  if ((crust).val > 0 && (size).val > 0) {
    $('#pizza').addClass('pizzaImage');
  }
}

Answer 1

var $selects = $('#size, #crust');
$selects.change(function(){
   var bothSelected = this.value && $selects.not(this).val();
   $("#pizza").toggleClass("pizzaImage", bothSelected);
});

Answer 2

I would start by adding a common class between the two, to make it easier to bind the function to both select elements at the same time. Maybe something like pizzaOptions. Then, you could do something like this:

$(".pizzaOptions").on("change", function(){
    var sizeSelected = $("#size").val() !== ""; 
    var crustSelected = $("#crust").val() !== ""; 

   if(sizeSelected && crustSelected){
        $('#pizza').addClass('pizzaImage');
   }
});