How to auto select option depending on another dropdowns value?

Question

I have three dropdowns. What I want is when I select the first two dropdown values, those information match with the third dropdown and update dynamically. If I select "M" and "Red" the third dropdown would show the "M / Red".

$(document).ready(function () {
  $('.variant').change(function(){ 
    var size = $(this).children(":selected").val();
    if (size != "" && size !== null) 
    {
      var itm =size + " / " + size;
      $('select[name="id"]option[value=' + itm + ']').attr('selected',true);
    }
  });

<form action="#" method="post">JSLint

  <select class="variant">
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
  </select>
  <select class="variant">
  <option value="Grey">Grey</option>
  <option value="Red">Red</option>
  <option value="White">White</option>
  </select>
  <br>
  <select id="data">
  <option value="S / Grey">S / Grey</option>
  <option value="M / Grey">M / Grey</option>
  <option value="L / Grey">L / Grey</option>
  <option value="S / Red">S / Red</option>
  <option value="M / Red">M / Red</option>
  <option value="L / Red">L / Red</option>
  <option value="S / White">S / White</option>
  <option value="M / White">M / White</option>
  <option value="L / White">L / White</option>
  </select>

</form>

Answer 1

You can use .get() and .map() to get selected values from dropdown and then use :contains() to set selected value in data select-box.

Demo Code :

$('.variant').change(function() {
  var size = $(".variant").get().map(function(el) {
    return el.value
  }).join(" / "); //get value of slected options and then join
  $("select#data >  option:contains(" + size + ")").prop('selected', true); //set selected value
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<form action="#" method="post">JSLint

  <select class="variant">
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
  </select>
  <select class="variant">
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
  </select>
  <br>
  <select id="data">
    <option value="S / Grey">S / Grey</option>
    <option value="M / Grey">M / Grey</option>
    <option value="L / Grey">L / Grey</option>
    <option value="S / Red">S / Red</option>
    <option value="M / Red">M / Red</option>
    <option value="L / Red">L / Red</option>
    <option value="S / White">S / White</option>
    <option value="M / White">M / White</option>
    <option value="L / White">L / White</option>
  </select>

</form>