JSFiddle - React, Tailwind, and code Playground

by KevinIsNowOnline

HTML

Cars: <select id='1' class='combo'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
    <option value="audi">BMW</option>
</select>
<br/>
Objects: <select id='2' class='combo'>
  <option value="House">House</option>
  <option value="Car">Car</option>
  <option value="Ball">Ball</option>
  <option value="Tree">Tree</option>
    <option value="Pool">Pool</option>
</select>
<br/>
Country: <select id='3' class='combo'>
  <option value="Philippines">Philippines</option>
  <option value="USA">USA</option>
  <option value="Nigeria">Nigeria</option>
  <option value="Australia">Australia</option>
    <option value="Malaysia">Malaysia</option>
</select>

<br/>
<input type='button' value='Check' id='checker'>

JavaScript

$('select').change(function (){
   
    var selectedIndex = $(this).prop("selectedIndex");
    if(selectedIndex === 4) { //basically the 5th item as it is zero indexed
        alert('you have chosen the fifth item');
    }
});


$('#checker').click(function (){
   indexChecker(); 
});

var indexChecker = function (){
    var controlList =[];
    $('select').each(function (){
        if($(this).prop("selectedIndex") === 4){
            controlList.push($(this).attr('id'));
                       
        }
    });
    alert('You have selected the fifth element in <select> element with id of : '+ controlList);
};