Посчитать сумму в Select'ах и скрыть определенные данные в списке?

Question

[MrFlatman]

Пишу калькулятор для расчета цены установки, возник вопрос, как посчитать сумму всех выбранных параметров, у меня много выпадающих списков? Также интересует, как можно скрыть определенные данные в списке, при выборе количества цилиндров в первом Select чтобы во втором Select скрылись определенные параметры? Изначально пробовал вот такой функцией :

function GetData()
  {
     // получаем индекс выбранного элемента
     var selind = document.getElementById("SelectMyLove").options.selectedIndex;
     var val= document.getElementById("SelectMyLove").options[selind].value;

   alert( "Value= " + val);
  }

Но успехом это не закончилось, подскажите, пожалуйста, как можно посчитать

<div class="cf-left-col">
  <div class="form-group">
    <select class="input-md form-control">
      <option>Выберите количество цилиндров</option>
      <option value="1">4 цилиндра</option>
      <option value="2">6 цилиндров</option>
      <option value="3">8 цилиндров</option>
      <option value="4">ГАЗель</option>
    </select>

  </div>
  <div class="form-group">
    <select class="input-md form-control">
      <option>Выберите оборудование</option>
      <!--4 цилиндра-->
      <option value="13000">OMVL SAVER-4 (Италия) - Лидер продаж в РФ</option>
      <option value="11700">Digitronic – (Польша)</option>
      <option value="7000">Atiker (Турция) – бюджетный комплет оборудования</option>
      <option value="12400">BRC- (Италия), Оборудование премиум класса)</option>
      <!--6 цилиндра-->
      <option value="17500">OMVL -6 (Италия), Лидер продаж в РФ</option>
      <option value="20800">OMVL -6 OBD (Италия) , Премиум линейка</option>
      <option value="28400">BRC- (Италия), Оборудование премиум класса</option>
      <!--8 цилиндра-->
      <option value="23000">OMVL -8 OBD (Италия) - Премиум линейка</option>
      <option value="33600">BRC- (Италия), Оборудование премиум класса</option>
    </select>
  </div>
  <div class="form-group">
    <select class="input-md form-control">
      <option>Выберите объем баллона</option>
      <option value="11275.29">Баллон (Метан) 50 л (219*1640) мм</option>
      <option value="29055.90">Баллон (Метан) 100 л( 425*1000) мм</option>
      <option value="25876.38">Баллон (Метан) 90 л (425*940) мм</option>
      <option value="4240.00">Баллон цилиндрический 100 л (399*895)</option>
      <option value="4310.00">Баллон 100 л (400*912)</option>
      <option value="4240.00">Баллон 103 л (356*1110) </option>
      <option value="4100.00">Баллон 105 л (376*1064)</option>
      <option value="4360.00">Баллон 130 л (399*1144) </option>
      <option value="4590.00">Баллон 130 л (400*1165)</option>
      <option value="7550.00">Баллон цилиндрический 200 л (498*1136) </option>
      <option value="2070.00">Баллон цилиндрический 35 л (241*880)</option>
      <option value="2520.00">Баллон цилиндрический 50 л (299*798) </option>
      <option value="2460.00">Баллон цилиндрический 50 л (300*796)</option>
      <option value="3240.00">Баллон цилиндрический 51 л (356*600) </option>
      <option value="2770.00">Баллон цилиндрический 60 л (299*948) </option>
      <option value="3070.00">Баллон цилиндрический 60 л (315*863) </option>
      <option value="2630.00">Баллон цилиндрический 60 л (300*945)</option>
      <option value="3000.00">Баллон цилиндрический 60 л (315*866)</option>
      <option value="2840.00">Баллон цилиндрический 65 л (299*1023) </option>
      <option value="4150.00">Баллон цилиндрический 80 л (356*900) </option>
      <option value="3520.00">Баллон тор внешняя горловина 42 л НЗГА (600*200)</option>
      <option value="5900.00">Баллон тор внешняя горловина 50 л (650*200) </option>
      <option value="4100.00">Баллон тор внешняя горловина 54 л НЗГА (630*220)</option>
      <option value="4710.00">Баллон тор внешняя горловина 60 л (630*250)</option>
      <option value="7550.00">Баллон тор внешняя горловина 62 л (720*210) </option>
      <option value="7500.00">Баллон тор внешняя горловина 74 л (720*230) </option>
      <option value="7900.00">Баллон тор внешняя горловина 81 л (720*250) </option>
      <option value="8350.00">Баллон тор внешняя горловина 98 л НЗГА (720*300)</option>
      <option value="3540.00">Баллон тор внутр. горловина 42 л НЗГА (600*200)</option>
      <option value="3990.00">Баллон тор внутр. горловина 47 л (600*220) </option>
      <option value="3730.00">Баллон тор внутр. горловина 53 л (630*225) </option>
      <option value="6620.00">Баллон тор внутр. горловина 54 л НЗГА (720*180)</option>
      <option value="6210.00">Баллон тор внутр. горловина 55 л (650*225) </option>
      <option value="8100.00">Баллон тор полнотелый 85 л (720*250) </option>
      <option value="8300.00">Баллон тор полнотелый 93 л (720*270) </option>
      <option value="8300.00">Баллон тор полнотелый 94 л (720*270) </option>
    </select>
  </div>
</div>
<div class="cf-right-col">
  <div class="form-group">
    <select multiple class="form-control">
      <option value="300">ВЗУ</option>
      <option value="1000">Сенсор уровня газа</option>
      <option value="1500">Евромультиклапан</option>
      <option value="1500">Обтяжка карпетом</option>
      <option value="500">Доп фильтр тонкой очистки</option>

    </select>
  </div>
  <div class="form-tip pt-20">
    <i class="fa fa-info-circle"></i> Для множественного выбора зажмите клавишу CTRL
  </div>
</div>

Answer 1

[Иван Иванов]

Тот случай, когда проще самому написать, чем объяснить. Но я попробую. Создаёшь массив всех Section и прогоняешь их через цикл, в котором пушишь в новый массив все option c значением selected. Затем этот массив собранный из option прогоняешь через цикл, в котором приплюсовываешь value к какой нибудь переменной. Не забудь преобразовать value в Number иначе у тебя дует получться что-то типа 150015007007300, так как value у option имеет string`овый тип данных.

Для того чтобы скрывать данные во втором select в зависимости от первого, вешаешь событие change select и через условия проверяешь: "Если у текущего select`a выбранный option имеет innerHTML == "Нужно тебе значение", то у другого select`a в котором необходимо изменить значения делаешь .options.length = 0; А затем используешь вот такую функцию

//Функция добавления новой опции к выбранному списку

function addOption (oListbox, text, value, isDefaultSelected, isSelected)		 

		{
		  
		  var oOption = document.createElement("option");
		  oOption.appendChild(document.createTextNode(text));
		  oOption.setAttribute("value", value);

		  if (isDefaultSelected) oOption.defaultSelected = true;
		  else if (isSelected) oOption.selected = true;

		  oListbox.appendChild(oOption);
		}

Используешь её вот так:

arrSelect[7].options.length = 0;	
    addOption(arrSelect[7], "- не выбран -", "0", true);	
    addOption(arrSelect[7], "топлок 41мм", "25", false);											
    addOption(arrSelect[7], "топлок 43мм", "25", false);

// arrSelect[7] - это твой массив собраных select где ключ это нужный тебе select
// "- не выбран -"  - это то что будет написано между тегами <option>
// "0" - это будет value 
// true - если надо что бы этот option в select был выбранным по умолчанию для остальных false

вроде всё.