Форум

MrZlo · #1 (**permalink**) 11.11.2016, 12:49

Добрый день уважаемые форумчане!
На просторах данного форума нашел темку от 10 года, и забрал из нее скриптик. Сама тема

Забрал из нее сливки и начал делать для себя. Вроде все сначала шло как по маслу но, потом наткнулся на проблему.
Сам скрипт во вложении.

Суть проблемы: нужно сделать что бы выводилась сумма из выбранной опции value.

<select id="articul_1" name="rar" class="select">
			<optgroup label="Granta St">
				<option id="g1" value="1300">На 1 сутки</option>
				<option id="g2" value="1100">2-3 суток</option>
				<option id="g3" value="1000">4-6 суток</option>
			</optgroup>
			<optgroup label="Granta Nm">
				<option id="g4" value="1600">На 1 сутки</option>
				<option id="g5" value="1300">2-3 суток</option>
				<option id="g6" value="1200">4-6 суток</option>
			</optgroup>

		</select>
		<br><br>
		<input type="button" onClick="javascript:CalcSum();" value="Расчитать стоимость">
		<br><br>
		<div id=TextSum></div>

На данный момент выводится только последний.

Сам скрипт подсчета:

function CalcSum(){
			var o=document.getElementById("articul_1");
			sum = 0;
			for(var i = 0; i < o.options.length; i++) {
				m1 = o.options[i].value;
				
				if ((m1 > 0)) {
					sum = m1;
				}
			}
			document.getElementById('TextSum').innerHTML = sum + " руб.";
		}

Почему выводится только последний, а не тот который я выбрал?
Дополнительно: как заблокировать подкатегорию, до тех пор пока не выбрана главная категория.

Заранее спасибо!

MrZlo · #2 (**permalink**) 11.11.2016, 12:52

Может конечно это устаревший вариант. Может есть то то новее и продуманей в плане подсчета стоимости. Буду признателен если посоветуете, что бы не делать велосипед.

рони · #3 (**permalink**) 11.11.2016, 12:55

MrZlo,

function CalcSum(){
      var o=document.getElementById("articul_1");
      document.getElementById('TextSum').innerHTML = o.value + " руб.";
    }

Coriolan161 · #4 (**permalink**) 11.11.2016, 12:56

MrZlo,

Цитата:

Почему выводится только последний, а не тот который я выбрал?

Потому что ты каждый раз присваиваешь заново

if ((m1 > 0)) {
  sum = m1;
}

MrZlo · #5 (**permalink**) 11.11.2016, 13:07

Огромное спасибо! Помогло! Как и ожидал что просто что то намудрил )

Еще пару вопросов:
1. Как заблокировать подкатегорию, до тех пор пока не выбрана главная категория?
2. Как сделать что бы с сумма выводилась без нажатия на кнопку "Расчитать стоимость"?

Coriolan161 · #6 (**permalink**) 11.11.2016, 13:14

MrZlo,
1. Где твои главные категории?
2. повесь листенера на событие change для селекта

MrZlo · #7 (**permalink**) 11.11.2016, 13:17

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

MrZlo,
1. Где твои главные категории?
2. повесь листенера на событие change для селекта

Полный листинг:

<!-- Пишем в соответствии со стандартом HTML5 -->
<!DOCTYPE HTML>
<html>
<head>
	<!-- Пишем заголовок документа -->
	<title>Динамические списки</title>
	<!-- Подключаем CSS-файл к документу -->
	<link rel="stylesheet" type="text/css" href="style.css" />
	<!-- Подключаем библеотеку jQuery, которая хранится на сервере Яндекса -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

	<!-- Подключаем файл со своим собственным скриптом -->
	<script src="my.script.js"></script>
	<script type="text/javascript">
		function CalcSum(){
			var o=document.getElementById("articul_1");
			document.getElementById('TextSum').innerHTML = o.value + " руб. за сутки + Аванс от 5000 руб.";
		}


	</script>
</head>
<body>
	<!-- Форма для динамических списков -->
	<form name=MenuF>
		<div id="calctitle">Марка:</div><!-- ГЛАВНЫЕ КАТЕГОРИИ -->
		<select id="category_1" class="select">
			<option value="Lada">Lada</option>
			<option value="Lifan">Lifan</option>
			<option value="Renault">Renault</option>
			<option value="Nissan">Nissan</option>
			<option value="Daewoo">Daewoo</option>
			<option value="Mitsubisi">Mitsubisi</option>
			<option value="Toyota">Toyota</option>
			<option value="Volkswagen">Volkswagen</option>
			<option value="Газ">Газ</option>
		</select>
		<div id="calctitle">Модель:</div><!-- ПОДКАТЕГОРИИ -->
		<select id="subcategory_1" class="select">
			<optgroup label="Lada">
				<option value="Granta St">Granta St</option>
				<option value="Granta Nm">Granta Nm</option>
				<option value="Granta At">Granta At</option>
				<option value="Largus 7 мест">Largus 7 мест</option>
			</optgroup>
			<optgroup label="Lifan">
				<option value="Smile">Smile</option>
			</optgroup>
			<optgroup label="Renault">
				<option value="Logan St">Logan St</option>
				<option value="Logan Nm">Logan Nm</option>
				<option value="Logan 2014">Logan 2014</option>
				<option value="Logan At">Logan At</option>
				<option value="StepWay At">StepWay At</option>
				<option value="Fluence">Fluence</option>
			</optgroup>
			<optgroup label="Nissan">
				<option value="Аlmera Nm">Аlmera Nm</option>
				<option value="Аlmera At">Аlmera At</option>
				<option value="Juke">Juke</option>
			</optgroup>
			<optgroup label="Daewoo">
				<option value="Nexia">Nexia</option>
				<option value="Matiz">Matiz</option>
			</optgroup>
			<optgroup label="Mitsubisi">
				<option value="Lancer">Lancer</option>
			</optgroup>
			<optgroup label="Газ">
				<option value="Соболь Баргузин">Соболь Баргузин</option>
			</optgroup>
			<optgroup label="Toyota">
				<option value="Corolla At">Corolla At</option>
				<option value="Camry At">Camry At</option>
			</optgroup>
			<optgroup label="Volkswagen">
				<option value="Polo">Polo</option>
			</optgroup>
		</select>
		<div id="calctitle">Количество суток:</div>
		<select id="articul_1" name="rar" class="select">
			<optgroup label="Granta St">
				<option id="g1" value="1300">На 1 сутки</option>
				<option id="g2" value="1100">2-3 суток</option>
				<option id="g3" value="1000">4-6 суток</option>
				<option id="g4" value="900">7-15 суток</option>
				<option id="g5" value="800">2-3 суток</option>
				<option id="g6" value="700">4-6 суток</option>
				<option id="g7" value="2750">Выходные*</option>
			</optgroup>
			<optgroup label="Granta Nm">
				<option id="g1" value="1600">На 1 сутки</option>
				<option id="g2" value="1300">2-3 суток</option>
				<option id="g3" value="1200">4-6 суток</option>
				<option id="g4" value="1100">7-15 суток</option>
				<option id="g5" value="900">2-3 суток</option>
				<option id="g6" value="800">4-6 суток</option>
				<option id="g7" value="3250">Выходные*</option>
			</optgroup>

		</select>
		<br><br>
		<input type="button" onClick="javascript:CalcSum();" value="Расчитать стоимость">
		<br><br>
		<div id=TextSum></div>
	</form>

</body>
</html>

MrZlo · #8 (**permalink**) 11.11.2016, 13:19

Скрипт для зависимых списоков

(function($) 
	{$.fn.dependent = function(opts) 
		{opts.data = {};this.each(function() 
			{$.each(opts.chain, function(index, selectID) 
				{var ident = selectID.substr(1);var selectHTML = $(selectID).html();
					opts.data[ident] = {};
					$('<select>'+selectHTML+'</select>').find('optgroup').each(function() 
						{var optGroup = $('<div>').append( $(this).eq(0).clone() ).html();
						var group = $(this).attr('label');opts.data[ident][group] = optGroup;});
					if(opts.chain[index+1]) 
						{$(opts.chain[index]).bind('change', { 'nextID' : opts.chain[index+1] }, binding);} });
			$(this).bind('change', { 'nextID' : opts.chain[0] }, binding);
			function binding(event) {var next = event.data.nextID.substr(1);
				$('#'+next).html(opts.data[next][$(this).val()]);
				$('#'+next).trigger('change');}});}})(jQuery);
    // Обращение к функции Dependent JQuery для взаимосвязанных списков
    $(document).ready(function() {$('#category_1').dependent({chain : ['#subcategory_1', '#articul_1']});});

MrZlo · #9 (**permalink**) 11.11.2016, 13:21

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

MrZlo,
2. повесь листенера на событие change для селекта

Я не знаю как это делать. Я PHPшник и верстальщик ) Я не знаю яву ) Поэтому и прошу помощи.

Coriolan161 · #10 (**permalink**) 11.11.2016, 13:59

MrZlo,

Цитата:

Я не знаю яву )

вот мальчик написал про события и обработку
https://learn.javascript.ru/introduction-browser-events

Форум

Справочник

Discord чат

Курсы javascript