Форум

core · #1 (**permalink**) 29.06.2016, 12:47

Решаю задачу - суммирование цены в зависимости от выбранных select.
Как упростить код - чтоб не подключаться к каждому select по ID? Зашел в тупик и написал такое ..

$(function(){ 
	var StandartValSel = 0;		
	var optionVal = 0;		
	

		$('select').on('change', function (e) {
        optionVal += parseInt( $(e.target).find("option:selected").val() );
		
		$('#price').text(optionVal);
	})
})

Пример HTML

<div id="price">0</div>
<select class="form-control " id="id1">
				<option value="0">Select:</option>
				<option value="110">110 Euro</option>
				<option value="120">120 Euro</option>
				<option value="130">130 Euro</option>
			</select>

			<select class="form-control " id="id2">
				<option value="0">Select:</option>
				<option value="10">10  Euro</option>
				<option value="20">20 Euro</option>
				<option value="30">30 Euro</option>
			</select>
			
			<select class="form-control " id="id3">
				<option value="0">Select:</option>
				<option value="210">210  Euro</option>
				<option value="220">220 Euro</option>
				<option value="230">230 Euro</option>
			</select>

Rasy · #2 (**permalink**) 29.06.2016, 12:57

$(function(){ 

	var optionVal = 0;		
	
		$('select').on('change', function (e) {
        optionVal += +$(e.target).val();
		
		$('#price').text(optionVal);
	});
});

core · #3 (**permalink**) 29.06.2016, 13:36

Сообщение от Rasy

$(function(){ 

	var optionVal = 0;		
	
		$('select').on('change', function (e) {
        optionVal += +$(e.target).val();
		
		$('#price').text(optionVal);
	});
});

Спасибо, красиво вы ее.. но есть момент.

optionVal += +$(e.target).val();

у нас все время додается значения, а как заставить обновлять значение из селекта .. и получать суму из трех селектов
https://jsfiddle.net/core18/6bm3xvce/

Rasy · #4 (**permalink**) 29.06.2016, 14:29

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>

$(function(){ 

	var optionVal = 0;
	
		$('select').on('change', function (e) {

        optionVal = $('select').map(function(i, el) {
          return $(el).val();
        }).get().reduce(function(p,c,i,a) {
          return +p + +c;
        });
        
  	    $('#price').text(optionVal);
	  });

});


    </script>
  </head>

  <body>
    <div id="price">0</div>
    <select class="form-control " id="id1">
      <option value="0">Select:</option>
      <option value="110">110 Euro</option>
      <option value="120">120 Euro</option>
      <option value="130">130 Euro</option>
    </select>
    <select class="form-control " id="id2">
      <option value="0">Select:</option>
      <option value="10">10  Euro</option>
      <option value="20">20 Euro</option>
      <option value="30">30 Euro</option>
    </select>
    <select class="form-control " id="id3">
      <option value="0">Select:</option>
      <option value="210">210  Euro</option>
      <option value="220">220 Euro</option>
      <option value="230">230 Euro</option>
    </select>
  </body>

</html>

рони · #5 (**permalink**) 29.06.2016, 15:30

Rasy,
минимизировал

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
$(function(){
    var $sel = $('select'), sum;
    $sel.on('change', function (e) {
        sum = [].reduce.call($sel,function(a, b) {
          return a + +b.value;
        },0);
  	    $('#price').text(sum);
    });
});
    </script>
  </head>

  <body>
    <div id="price">0</div>
    <select class="form-control " id="id1">
      <option value="0">Select:</option>
      <option value="110">110 Euro</option>
      <option value="120">120 Euro</option>
      <option value="130">130 Euro</option>
    </select>
    <select class="form-control " id="id2">
      <option value="0">Select:</option>
      <option value="10">10  Euro</option>
      <option value="20">20 Euro</option>
      <option value="30">30 Euro</option>
    </select>
    <select class="form-control " id="id3">
      <option value="0">Select:</option>
      <option value="210">210  Euro</option>
      <option value="220">220 Euro</option>
      <option value="230">230 Euro</option>
    </select>
  </body>

</html>

Rise · #6 (**permalink**) 29.06.2016, 16:06

core,

$(function(){
	var value, $price = $('#price'), $select = $('select').on({
		'change': function(e) { value = 0, $select.trigger('adding'), $price.text(value) }, 
		'adding': function(e) { value += +this.value }
	});
});

core · #7 (**permalink**) 29.06.2016, 16:07

Спасибо большое. Буде разбираться и изучать...
от меня + в карму

Rasy · #8 (**permalink**) 29.06.2016, 16:16

Сообщение от рони

минимизировал

мастер рефакторинга

рони · #9 (**permalink**) 29.06.2016, 16:18

Rise,

Форум

Справочник

Discord чат

Курсы javascript