Soy más nuevo en Javascript y tengo un sitio web actualmente configurado para que el usuario pueda seleccionar varias opciones y agregará sus valores. Estoy tratando de hacer que cuente cuántas de las opciones que han seleccionado

// Call out all the functions for the calculations
$(function() {
  var fields = $('option');
  $('#form1 :input').change(calculate)
  $("#form1 option").text(function(i, t) {
    if (this.value !== "0")
      return t + " - " + this.value
  })
  // Do the calculations
  function calculate() {
    var severity = 0;
    fields.each(function() {
      if (this.selected) {
        severity += +$(this).val();
      }
    })
    $('#severity').html(numberWithCommas(severity.toFixed(0)));
  }
})
// Because Javascript hates commas
function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
  <select name="DMA" multiple id="DMA">
    <option value="1" label="1">1</option>
    <option value="2" label="2">2</option>
    <option value="3" label="3">3</option>
    <option value="4" label="4">4</option>
  </select>
</form>
You have selected "n" options with a total value of <u id="severity"></u>

Quiero que la última porción de HTML muestre el total de elementos seleccionados en el campo "n". Sospecho que solo tendré que reemplazar la "n" con algo similar a lo que tengo que da un total de todos los valores seleccionados de la tabla.

Espero haber sido claro sobre lo que estoy tratando de hacer, por favor avíseme si hay alguna pregunta adicional. Gracias de antemano por su ayuda.

-1
Circuit Static 24 feb. 2018 a las 02:16

3 respuestas

La mejor respuesta
  • Agregue una sección para almacenar las opciones seleccionadas, es decir: <span id="count">0</span>.
  • Use lo siguiente para contar las opciones seleccionadas $(this).children(':selected').length
// Call out all the functions for the calculations
$(function() {
  var fields = $('option');
  $('#form1 :input').change(calculate)
  $("#form1 option").text(function(i, t) {
    if (this.value !== "0")
      return t + " - " + this.value
  })
  // Do the calculations
  function calculate() {
    var severity = 0;
    fields.each(function() {
      if (this.selected) {
        severity += +$(this).val();
      }
    })
    $('#severity').html(numberWithCommas(severity.toFixed(0)));
    
    $('#count').html($(this).children(':selected').length);
  }
})
// Because Javascript hates commas
function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
  <select name="DMA" multiple id="DMA">
    <option value="1" label="1">1</option>
    <option value="2" label="2">2</option>
    <option value="3" label="3">3</option>
    <option value="4" label="4">4</option>
  </select>
</form>
You have selected <span id="count">0</span> options with a total value of <u id="severity"></u>
1
Ele 23 feb. 2018 a las 23:24

Simplemente cuente el número de elementos seleccionados (en el método calculate()) y luego deje que jQuery muestre el valor en un elemento html:

// Call out all the functions for the calculations
$(function() {
  var fields = $('option');
  $('#form1 :input').change(calculate)
  $("#form1 option").text(function(i, t) {
    if (this.value !== "0")
      return t + " - " + this.value
  })
  // Do the calculations
  function calculate() {
    var severity = 0;
    var count = 0
    fields.each(function() {
      if (this.selected) {
        severity += +$(this).val();
        count++
      }
    })
    $('#severity').html(numberWithCommas(severity.toFixed(0)));
    $('#amount').html(count);
  }
})
// Because Javascript hates commas
function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
  <select name="DMA" multiple id="DMA">
    <option value="1" label="1">1</option>
    <option value="2" label="2">2</option>
    <option value="3" label="3">3</option>
    <option value="4" label="4">4</option>
  </select>
</form>
You have selected <u id="amount"></u> options with a total value of <u id="severity"></u>
0
messerbill 23 feb. 2018 a las 23:25

Creo que a alguien le gustan las soluciones complicadas.

$('#DMA').on('input',function(){
    var $el=$(this).find(':selected');
    var count=0;
    $el.each(function(){
        count+=parseFloat($(this).val().replace(',', '.'))
    });
    $('#severity').html(count);
    $('#amount').html($el.length)
}).trigger('input')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
  <select name="DMA" multiple id="DMA">
    <option value="1" label="1">1</option>
    <option value="2,5" label="2">2</option>
    <option value="3.2" label="3">3</option>
    <option value="4" label="4">4</option>
  </select>
</form>
You have selected <u id="amount"></u> options with a total value of <u id="severity"></u>
1
Vixed 23 feb. 2018 a las 23:52