Лучший способ динамического расчета в зависимости от выбранных значений 2 списка выбора в jquery

Question

Лучший способ динамического расчета в зависимости от выбранных значений 2 списка выбора в jquery

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>

В зависимости от того, какое значение выбрано, появятся другие флажки для выбора, если выбрано любое из трех значений.

Это список выбора для индикатора количества мужчин:

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

Есть ли более быстрый и эффективный способ выполнения того, что я пытаюсь сделать?

Я думаю, что у вас есть слушатель для трех полей выбора, но мне кажется сложным, поскольку я все еще новичок в jquery.

Atasha 24 окт. 2013, в 14:25

Источник

0

Вы можете опубликовать код JS, а?
Anto Subash 24 окт. 2013, в 12:07

Теги:

javascript

jquery

2 ответа

Ещё вопросы

Alessandro Minoccheri · Answer 1 · 2013-10-24T09-22-00.000Z

попробуйте это в 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

Как правило, вы всегда должны передавать основание parseInt. Например, parseInt($('#no-of-males').val(), 10)

Aditya Singh · Answer 2 · 2013-11-15T04-10-00.000Z

Использование 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;
    };
}