0

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

基本上，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 个值中的任何一个，则会出现另一个选择框。

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

  <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 个选择字段设置一个侦听器，但这对我来说似乎很复杂，因为我仍然是 jquery 的初学者。

4

2 回答 2

1

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

演示

于 2013-10-24T12:08:02.420 回答
0

使用 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;
    };
}
于 2013-11-15T05:15:59.367 回答