Mayhem Of Ben Mayhem Of Ben - 10 months ago 110
HTML Question

How to total up all drop down menu

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>



Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download