Question

我需要在jquery中循环选择框值，

     <?php 

for ($i=0;$i<3;$i++) 
{
?>
<select class="sum-selector" id="options_<?php echo $i ?>">

   <option value="25">RS 25</option>
    <option value="30">Rs 30</option>
    <option value="45">Rs 45</option>
     <option value="95">Rs 95</option>
 </select>

 <?php  } ?>

<p id="sum_of_select"> </p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$('.sum-selector').change(getSum);
function getSum() {
  var sum = 0;
  $('.sum-selector').each(function(select) {
    if(select.value) {
      sum += parseInt(select.value);
      alert (sum)
    }
  });

  alert('sum is: ' + sum);
}
</script>

这里改变值在警报时变为0我需要得到三个选择框值的和值，例如在第一个选择框中如果我选择25秒30第三个45输出应该是100

Answer 1

使用此选项获取所选值

$('.sum-selector').each(function(i) {
     alert($(this).find('option:selected').val());
});

这是你的代码：

<?php 

for ($i=0;$i<3;$i++) 
{
?>
<select class="sum-selector" id="options_<?php echo $i; ?>">
     <option value="25">RS 25</option>
     <option value="30">Rs 30</option>
     <option value="45">Rs 45</option>
     <option value="95">Rs 95</option>
 </select>
<?php  } ?>

<p id="sum_of_select"> </p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$('.sum-selector').change(getSum);
function getSum() 
{
  var sum = 0;
  $('.sum-selector').each(function(i) {
    if($(this).find('option:selected').val()) {
      sum += parseInt($(this).find('option:selected').val());
      alert(sum)
    }
  });
  alert('sum is: ' + sum);
}
</script>

Answer 2

简单说明：jsfiddle，在线查看并告知我们。

$(function(){
    $('.sum-selector').on("change", function(){
    var sum = 0;
    $('.sum-selector option:selected').each(function(){
      var val = $(this).val();
      sum = parseInt(sum) + parseInt(val);
    });  
    $("#sum_of_select").text(sum);
  });
});

Answer 3

在选择器上使用.each方法，就像在示例中一样。您可以按类选择所有选择框。然后循环遍历它们并使用this关键字来获取vaule，该关键字在循环中引用它所在的元素。然后使用.val()获取值并将其添加到总和

sum = 0;
$('select.sum-selector').each(function() {
    sum += $(this).val();
}

Answer 4

$('#select').change(function() {
  var total = 0;
  $(this).find('option').each(function(index, element) {//find all option
    total += parseFloat(element.value) || 0;//get value of each option and add them
  });
  console.log(total)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sum-selector" id="select">

  <option value="25">RS 25</option>
  <option value="30">Rs 30</option>
  <option value="45">Rs 45</option>
  <option value="95">Rs 95</option>
</select>

Answer 5

使用纯javascript而不使用JQuery

 <?php 

for ($i=0;$i<3;$i++) 
{
?>
<select class="sum-selector" id="options_<?php echo $i ?>" onchange="newval('options_<?php echo $i ?>')">

   <option value="25">RS 25</option>
    <option value="30">Rs 30</option>
    <option value="45">Rs 45</option>
     <option value="95">Rs 95</option>
 </select>

 <?php  } ?>

<p id="sum_of_select"> </p>

<script>
function newval(options) {
 var val = document.getElementById(options);
 val.value =    parseInt(val.options[val.selectedIndex].value);
 sum();
}
function sum(){
sum =0;
for (i=0;i<3;i++) {
    var val = document.getElementById("options_"+i);
    var sum = sum + parseInt(val.options[val.selectedIndex].value);
}
console.log(sum);
}
</script>

我需要在jquery里面总结select box值的值

5 个答案: