0

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 つの値のいずれかが選択されると、別の選択ボックスが表示されます。

これは、男性の数のインジケーターの選択リストです。

  <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 に答える