html - jquery select trigger action if option is changed from specific value to another specific value -

in code. have 'no path' option value trigger when selected. have hierachy of no path, mono, stereo, surround. surround being highest option , no path being lowest.

what i'm trying have div class triggered if option higher eg. surround.

so if option on "surround" , change "stereo" trigger event.

the same applies if went "surround" "mono" trigger event because going higher lower.

however...if go "mono" "stereo" (or "mono" "surround) not trigger event because going higher option.

i have tried manually code got confusing , long , didnt work.

it

if - changing option less important (or lower than) option selected - trigger event

else - don't trigger event.

i've trawled through lots of sites , tried piece halfway before stuck.

any thoughts on how better?

here code:

script

var hello = ('select option:selected'); alert(hello);  $('select').on('change', function () {     var valueselected = this.value;      alert(valueselected);     if($(this).val() === 'no path'){          $('.do-something').addclass('triggered');      } }); 

html

  <select class="bus-width btn-light-outline">     <option value="no path">no path</option>     <option value="mono">mono</option>     <option value="stereo">stereo</option>     <option value="surround">5.1 surround</option>   </select>  <div class="do-something">this needs triggered</div> 

css

.do-something {     position:absolute;     bottom:70px;     padding:30px;     background:white;     border:1px solid black; } .triggered {   background:green;   } 

https://jsfiddle.net/susannalarsen/dh5ma2j1/

here solution uses index()

basically index position of element presented in document, first option have index=0, second option have index=1, , on. current selected option's index, , compare of last selected.

var lastindex = null;  $('select').on('change', function () {      var thisindex = $(this).find(":selected").index();      if(thisindex < lastindex){         $('.do-something').addclass('triggered');        } else {         $('.do-something').removeclass('triggered');        }      lastindex = thisindex;  }); 

demo: https://jsfiddle.net/alan0xd7/dh5ma2j1/5/