CODEWITHSUNDEEP
javascripthtmljquerydropdown
Anupam Mistry
Anupam Mistry

Reputation: 421

How to auto select option depending on another dropdowns value?

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>

Upvotes: 0

Views: 4042

Answers (3)

Swati
Swati

Reputation: 28522

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>

Upvotes: 1

Simone Rossaini
Simone Rossaini

Reputation: 8162

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:

Upvotes: 1

Kaan
Kaan

Reputation: 129

    $(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>

Upvotes: 1

Related Questions