CODEWITHSUNDEEP
javascriptjqueryhtml
Campus Module
Campus Module

Reputation: 13

Check on change if any other select tag with same option class exists via jQuery

I have the following HTML code for two dropdown selectors:

<select class="sel1">
    <option class="c21" selected></option>
    <option class="c20"></option>
</select>

<select class="sel2">
    <option class="c21" selected></option>
    <option class="c22"></option>
</select>

How can I check if two selected options in different <select> tags have the same class?

$('.sel1').change(fucntion(){
    var op1class = $('.sel1 option:selected').attr("class");
    // How can I check if any other selected <select> tag has the same option class?
});

Upvotes: 0

Views: 91

Answers (2)

ozil
ozil

Reputation: 7117

you are missing $ in ('.sel1 option:selected').attr("class");

$('.sel1').change(function(){
  var op1class = $('.sel1 option:selected').attr("class");
  var op2class = $('.sel2 option:selected').attr("class");
  if(op1class == op2class ){
    //you code
  }
  alert(op1class);
  alert(op2class);
});

upDated 

$('.sel1').change(function(){
  var op1class = $('select option:selected').attr("class");
  var arr = $('select option:selected').map(function(){
    return $(this).attr("class");
  }).get()
  //var op2class = $('.sel2 option:selected').attr("class");
  //if(op1class == op2class ){
    //you code
  //}
  alert(arr);
  //alert(op2class);
});

Demo

Upvotes: 1

ImreNagy
ImreNagy

Reputation: 511

You can select all selected options via $('option:selected'). Then simply iterate through them and see if it contains the class of your reference option*. Be aware that the option from "sel1" is also part of the array, so you need to filter this element, i.e. by reading it's parent's class.

*See @Ana Vinatoru's comment on how to do that properly.

Upvotes: 0

Related Questions