@MrFlatman
Студент

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

Пишу калькулятор для расчета цены установки, возник вопрос, как посчитать сумму всех выбранных параметров, у меня много выпадающих списков? Также интересует, как можно скрыть определенные данные в списке, при выборе количества цилиндров в первом 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>
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ответы на вопрос 1
@ZZiliST
Изучаю JS, CSS, HTML, PHP
Тот случай, когда проще самому написать, чем объяснить. Но я попробую. Создаёшь массив всех 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


вроде всё.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
R52.RU Нижний Новгород
от 30 000 до 50 000 руб.
Star-staff Москва
от 100 000 до 150 000 руб.
Sveak Барнаул
от 50 000 руб.
19 окт. 2019, в 19:49
525 руб./в час
19 окт. 2019, в 19:46
35000 руб./за проект
19 окт. 2019, в 19:37
300000 руб./за проект