提问者:小点点

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


我是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结构不变。如果您对如何解决此问题有任何想法,请随时发表评论或分享代码想法。
我感谢您的帮助!


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