How to show an alert using javascript when the option from select box choose secondly

Question

I have grid which has 'N' number of rows. I have a select box on each row with three options.

<tr>
 <td>
   <select id="1">
    <option>YES</option>
    <option>NO</option>
    <option>IGNORE</option>
   </select>
 <td>
</tr>
<tr>
 <td>
   <select id="2">
    <option>YES</option>
    <option>NO</option>
    <option>IGNORE</option>
   </select>
 <td>
</tr>
<tr>
 <td>
   <select id="3">
    <option>YES</option>
    <option>NO</option>
    <option>IGNORE</option>
   </select>
 <td>
</tr>

I would like to show an alert when the user selects IGNORE secondly. I dont want to show the alert when the user select 'IGNORE' on first time.

Let us consider select ID#1, i dont want to show an alert if the user choose 'IGNORE' or 'YES' for the first time. But if the user has already clicked on 'YES' or 'NO' and then tries to click on 'IGNORE' next time then i want to show an alert.

This function has to work on all select box. Can somebody help to resolve this.

Answer 1

You can create a javascript map that maintains count of how many time a value in dropdown is selected. If that count is more than 1 for a dropdown, you can show alert.

<tr>
 <td>
 <select id="1" onchange="updateSelectionCount('1')">
  <option>YES</option>
  <option>NO</option>
 <option>IGNORE</option>
</select>
<td>
</tr>
<tr>
<td> 
<select id="2" onchange="updateSelectionCount('2')">
<option>YES</option>
<option>NO</option>
<option>IGNORE</option>
</select>
 <td>
</tr>
<tr>
<td>
 <select id="3" onchange="updateSelectionCount('3')">
<option>YES</option>
<option>NO</option>
<option>IGNORE</option>
 </select>
<td>
</tr>
<script>
var map = new Object();
function updateSelectionCount(comboId){
    var e = document.getElementById(comboId);
    var selectedValue = e.options[e.selectedIndex].value;
    if(selectedValue=='IGNORE'){
        if(map[comboId]==1){
            alert('selected second time');
        }else{
            map[comboId]=1;
        }
    }else{
        map[comboId]=1;
     }

}
</script>

Answer 2

If you want to use jquery you can also do this:

<script type="text/javascript">
    $( document ).ready(function() {
       $('select').on('change', function() {

            if (typeof this.count == 'undefined')
            {
                this.count = 0;
            }
            else{
                if (this.count>=0 && this.value=="2")
                {
                    alert("my Warning")
                }
                this.count += 1
            }
        })
    });
  </script>
   <select>
    <option value="0">YES</option>
    <option value="1">NO</option>
    <option value="2">IGNORE</option>
   </select>

   <select>
    <option value="0">YES</option>
    <option value="1">NO</option>
    <option value="2">IGNORE</option>
   </select>