如何从选择框中选择第二个选项时使用javascript显示警报

时间:2017-03-24 11:12:39

标签: javascript alert

我的网格有'N'行。我在每一行都有一个选择框,有三个选项。

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

我想在用户第二次选择IGNORE时显示警告。当用户第一次选择“IGNORE”时,我不想显示警报。

让我们考虑选择ID#1,如果用户第一次选择“IGNORE”或“YES”,我不想显示警告。但是,如果用户已经点击“是”或“否”,然后下次尝试点击“忽略”,那么我想显示警告。

此功能必须适用于所有选择框。有人可以帮助解决这个问题。

2 个答案:

答案 0 :(得分:0)

您可以创建一个javascript地图,用于维护选择下拉列表中的值的次数。如果下拉列表的计数大于1,则可以显示警报。

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

答案 1 :(得分:0)

如果你想使用jquery,你也可以这样做:

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