Суммировать значения select (option data) в input

06 июня 2021, 08:50

Помоги пожалуйста переделать, чтобы сумма считалась не по значениям value выбранных option, а по значениям data-col

$('select').change(sum); 
 
function sum(){ 
    let result=0; 
    $('#sum').find('select').each(function(){ 
        let value = 0; 
        if (typeof $(this).val() == 'object'){ 
          $.each($(this).val(), function(index, val) { 
            value += val*1; 
          }); 
        } else { 
          value = $(this).val() 
        } 
        result+=value*1; 
    }); 
    $('#itog').val(result); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="sum"> 
  <form> 
    <select id="1" name="1"> 
      <option data-col="5" value="1">текст</option> 
      <option data-col="2" value="2">текст</option> 
    </select> 
    <select id="2" name="2"> 
      <option data-col="3" value="1">текст</option> 
      <option data-col="4" value="2">текст</option> 
    </select> 
    <select id="3" name="3" multiple> 
      <option data-col="4" value="1">текст</option> 
      <option data-col="9" value="2">текст</option> 
    </select> 
 
    <input type="text" name="itog" id="itog" value="" /> 
  </form> 
</div>

Answer 1

$('select').change(sum); 
 
function sum() { 
  let result = 0; 
  $('#sum').find('select option:selected').each(function() { 
    if (!isNaN($(this).data("col"))) 
      result += +$(this).data("col"); 
  }); 
  $('#itog').val(result); 
} 
sum();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="sum"> 
  <form> 
    <select id="1" name="1"> 
      <option data-col="5" value="1">текст</option> 
      <option data-col="2" value="2">текст</option> 
    </select> 
    <select id="2" name="2"> 
      <option data-col="3" value="1">текст</option> 
      <option data-col="4" value="2">текст</option> 
    </select> 
    <select id="3" name="3" multiple> 
      <option data-col="4" value="1">текст</option> 
      <option data-col="9" value="2">текст</option> 
    </select> 
 
    <input type="text" name="itog" id="itog" value="" /> 
  </form> 
</div>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как можно изменять порядок элементов массива из DOM?

У меня в реакт компоненте, рендерется определенный список из массива с помощью map()Соответственно в DOM они отображаются последовательно, соответсвтенно...

340

javascript