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>

@cloned for real if this attribute is omitted, the value is taken from the text content of the option element. [ — Simone Rossaini, Jun 29 '21 at 06:21
Thanks for that attention, I've added the values of all options. — Anupam Mistry, Jun 29 '21 at 06:21

Kaan · Answer 1 · 2021-06-29T07:03:41.313

    $(document).ready(function () {
      $('.variant').change(function(){ 
        var parameters = $(".variant");
      
        var p1 = $(".variant")[0].value;
        var p2 = $(".variant")[1].value;
$("#data").find("option").each(function(i,item){
$(item).removeAttr("selected");
});
$("#data").find("option[data-v='"+p1+"-"+p2+"']").attr('selected','selected');
        });
        
      });

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

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

    </form>

I think it is working fine now. The problem was option's selected attribute — Kaan, Jun 29 '21 at 07:05

Simone Rossaini · Answer 2 · 2021-06-29T07:08:39.283

I propose you an alternative to jquery:

const size = document.querySelector('select[data-size]');
const color = document.querySelector('select[data-color]');
const lastSelect = document.querySelector('#data');
size.addEventListener('change', () => {
  selectOption();
});
color.addEventListener('change', () => {
  selectOption();
});

function selectOption() {
  const searchtext = size.value + ' / ' + color.value;
  for (var i = 0; i < lastSelect.options.length; ++i) {
    if (lastSelect.options[i].text === searchtext) lastSelect.options[i].selected = true;
  }
}

<form action="#" method="post">
  <select data-size>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
  </select>
  <select data-color>
    <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>

What i used?

Change both select with own data-attribute (data-size, data-color)
addEventListener for add Event 'change' to both select and run selectOption() function
for-loop + ===, for search the option with same text of searchtext (size + color)

I recommend reading:

After comment:

const sizecolor = document.querySelectorAll('.variant');
const lastSelect = document.querySelector('#data');
sizecolor.forEach(select => {
  select.addEventListener('change', () => {
    selectOption();
  });
});

function selectOption() {
  const searchtext = sizecolor[0].value + ' / ' + sizecolor[1].value;
  for (var i = 0; i < lastSelect.options.length; ++i) {
    if (lastSelect.options[i].text === searchtext) lastSelect.options[i].selected = true;
  }
}

<form action="#" method="post">
  <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>

The difference between the other solution, is i used querySelectorAll with class .variant and use forEach for addEventListener at both select.

I recommend reading:

Array.prototype.forEach()

The answer is correct but I want to use class `.variant` for the answer. — Anupam Mistry, Jun 29 '21 at 06:57

score 1 · Accepted Answer · answered Jun 29 '21 at 07:15

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>

Suppose there is the combination of "M / Grey" but not "M / Red" in the "data" id dropdown, and I select "M" in that case "Red" option will not show in the "variant" class dropdown. — Anupam Mistry, Jun 30 '21 at 10:15
Hi, check [this](https://stackoverflow.com/a/66291799/10606400) will be helpful . — Swati, Jun 30 '21 at 12:39
I check your given link but in that solution, every dropdown has the same class, here the situation is different. I have 2 dropdowns that have the same class but the third dropdown have ID. — Anupam Mistry, Jul 01 '21 at 10:49

How to auto select option depending on another dropdowns value?

3 Answers3

Linked