选择具有相同CSS类和jQuery的选项

Question

我是jQuery/js的新手，遇到了这样的问题：您可以运行我的代码，发现计数不正确：

null

$('.form-control').change(function() {
  countTotal();
});

$('.form-control').change(function() {
  countTotal();
});

function countTotal() {


  var level1 = parseInt($(".form-control :selected").val(), 10);
  var level2 = parseInt($(".form-control :selected").val(), 10);


  var total = level1 * level1;


  $(".form-group > #riz").val(total);
  $(".form-group > #riz").attr("disabled", true);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<div class="form-group">
  <input id="riz">
</div>
<hr>

<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<div class="form-group">
  <input id="riz">
</div>

null

我的HTML必须保持不变，我必须找到一些方法使jQuery在本例中工作，并且保持HTML结构不变。如果您对如何解决此问题有任何想法，请随时发表评论或分享代码想法。
我感谢您的帮助！

Answer 1

您的代码存在多个问题。

首先，您多次使用同一个id。ID必须唯一。

第二，认为这是错误的var total=level1*level1；应该是var total=level1*level2；

第三，您不需要在$（“.form-control：selected”）.val()中使用:selected，因为如果您的元素是select，则$（“.form-control”）.val()将始终采用selected选项的值。

现在我已经更改了html和jquery，使其能够满足您的需求。

演示

null

$('.form-control').change(function() {
  countTotal($(this));
});

function countTotal(ele) {
  var level1 = parseInt(ele.val() || 0, 10);
  var level2 = parseInt(ele.siblings(".form-control").val() || 0, 10);

  var total = level1 * level2;

  ele.closest(".form-group").next().find(".riz").val(total);
  ele.closest(".form-group").next().find(".riz").attr("disabled", true);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<div class="form-group">
  <input class="riz">
</div>
<hr>

<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<div class="form-group">
  <input class="riz">
</div>