Best way to dynamically calculate depending on the selected values of 2 select lists in jquery

Question

I have been trying to calculate dynamically the values selected from two different select list but I can't seem to find a good solution for it.

Basically, the 2 select lists are also dependent to 1 select list.

This is the main select list I got:

  <select id="gender" name="">
        <option value="_none">- Select a value -</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
        <option value="Both">Both</option>
  </select>

Depending of what value is selected, another select boxes would appear if any of the 3 values are selected.

This is the select list for the indicator of the number of Males:

  <select id="no-of-males" name="">
        <option value="_none">- Select a value -</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>

For females:

  <select id="no-of-females" name="">
        <option value="_none">- Select a value -</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>

I have a disabled textfield where I dynamically display the calculated value (sum) depending on the values selected.

  <input type="text" name="total" id="total" disabled>

Is there a quicker and more efficient way of accomplishing what I am trying to do?

I am thinking of having a listener for the 3 select fields but it seems to be complicated for me as I am still a beginner in jquery.

Answer 1

Using angularJS :- http://jsfiddle.net/adiioo7/48dLE/

HTML:-

<div ng-app>
    <div ng-controller="myController">
        <select id="gender" name="" ng-model="gender">
            <option value="_none">- Select a value -</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Both">Both</option>
        </select>
        <select id="no-of-males" name="" ng-show="gender=='Male'||gender=='Both'" ng-model="male">
            <option value="0">- Select a value -</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>
        <select id="no-of-males" name="" ng-show="gender=='Female'||gender=='Both'" ng-model="female">
            <option value="0">- Select a value -</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>
        <br>Total {{total()}}</div>
</div>

JS:-

function myController($scope) {
    $scope.gender = '_none';
    $scope.male = '0';
    $scope.female = '0';

    $scope.total = function () {
        if ($scope.gender == 'Male') 
            return parseInt($scope.male);
        else if ($scope.gender == 'Female') 
            return parseInt($scope.female);
        else if ($scope.gender == 'Both')
            return parseInt($scope.male) + parseInt($scope.female);
        return 0;
    };
}

Answer 2

try this in jquery

$('#gender').change( function(){
   if($(this).val() == 'Male'){
      $('#total').val($('#no-of-males').val());
   }
   if($(this).val() == 'Female'){
      $('#total').val($('#no-of-females').val());
   }
   if($(this).val() == 'Both'){
      if($('#no-of-males').val() != '_none')
          var m = parseInt($('#no-of-males').val());
      else
          var m = 0;
      if($('#no-of-females').val() != '_none')
          var f = parseInt($('#no-of-females').val());
      else
          var f = 0;
      $('#total').val(m + f);
   }
});

DEMO