I need help im new to this but I have 3 drop down menus how would count them and total them all up to prompt the user if the total of the drop downs is more then 10 in total :
I have add the code im using below
<table align="center" width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270" align="right">N1:</td>
<td width="270" align="right"><select name="N1" id="N1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td>
<td width="270" align="right">N2:</td>
<td width="270" align="right"><select name="N2" id="N2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td>
</tr>
<td width="370" align="right">N3:</td>
<td width="270" align="right"><select name="N3" id="N3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</td>
</tr>
Attach the change event to all the three select's, then on change loop through the select's you've and calculate the total sum of the selected value, like :
$('select').each(function() {
total += Number($(this).val());
});
Hope this help.
$('select').on('change', function() {
var total = 0;
$('select').each(function() {
total += Number($(this).val());
});
console.log(total);
if (total > 10) {
console.log('Alert user');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270" align="right">N1:</td>
<td width="270" align="right">
<select name="N1" id="N1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td width="270" align="right">N2:</td>
<td width="270" align="right">
<select name="N2" id="N2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td width="370" align="right">N3:</td>
<td width="270" align="right">
<select name="N3" id="N3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</table>