Javascript 根据jquery中2个选择列表的选定值动态计算的最佳方法

我一直在尝试动态计算从两个不同的选择列表中选择的值，但似乎找不到一个好的解决方案

基本上，2个选择列表也依赖于1个选择列表

这是我得到的主要选择列表：

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

根据选择的值，如果选择了3个值中的任何一个，将显示另一个选择框

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

这是男性数量指标的选择列表：

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

女性：

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

我有一个禁用的文本字段，根据所选的值动态显示计算值和

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

有没有更快更有效的方法来完成我想做的事情

我正在考虑为3个select字段设置一个侦听器，但这对我来说似乎很复杂，因为我仍然是jquery的初学者。

在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);
   }
});

使用angularJS：- HTML:-

---

你也可以发布js代码吗？你通常应该把基数传递给parseInt。例如，parseInt$‘雄性数量’。val，10

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