Javascript-форум - Скрестить зависимые select и подсчет суммы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Скрестить зависимые select и подсчет суммы (https://javascript.ru/forum/dom-window/13277-skrestit-zavisimye-select-i-podschet-summy.html)

Скрестить зависимые select и подсчет суммы

Здравствуйте форумчане! Вся надежда на вас. Вот уже не один день бьюсь над проблемой, а продвинулся совсем чуток. Я не силен в JS, поэтому прошу помощи у вас.

Пытаюсь скрестить 2 скрипта, один - это зависимые списки, второй - это калькулятор цен. Проблема в следующем. Списки работают, калькулятор работает (если в поле вводить количество), но цена берется из id поля input. Мне же необходимо чтоб цена бралась в зависимости от выбора в select артикула товара (допустим из id, хотя не уверен) и дополнительно складывалась с цифрой-количеством из поля input. Помогите разобраться. Уже мозги пухнут :blink:

Вот код:

Подгружаем JQuery для обработки зависимых списков:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

Функция обработки списков и вызов функции:

// Функция Dependent JQuery для взаимосвязанных списков
(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']});});

Функция калькулятора и вывода результата на лету

function CalcSum(obj){
	MF = document.MenuF;
	im = MF.elements.length;
	ps = parseInt(obj.value.toString());
	if (isNaN(ps)) {
		obj.value = "";
		}
	else {
		obj.value = ps;
		}
	sum = 0;
	for(i=0; i<im; i++) {
		m1 = MF.elements[i].value;
		m2 = MF.elements[i].id;
		if ((m1 > 0) && (m2 > 0)) {
			sum += m1*m2;
			}
		}
	MF.SumT.value = sum;
	TextSum.innerHTML = sum + " руб.";
	}

Вот сам зависимый список (создается динамически на PHP, но сейчас это не суть):

<form name=MenuF>
Категория
<select id="category_1" class="select">
<option value="Командные игры">Командные игры</option>
<option value="Механические игры">Механические игры</option>
</select>
<br>Подкатегория
<select id="subcategory_1" class="select">
<optgroup label="Командные игры">
<option value="Наименование подкатегории 1">Наименование подкатегории 1</option>
<option value="Наименование подкатегории 2">Наименование подкатегории 2</option>
</optgroup>
<optgroup label="Механические игры">
<option value="Наименование подкатегории 10">Наименование подкатегории 10</option>
</optgroup>
</select>
<br>Артикул
<select id="articul_1" class="select">
<optgroup label="Наименование подкатегории 1">
<option id="100" value="ART-п11">ART-п11</option>
<option id="101" value="ART-п12">ART-п12</option>
<option id="102" value="ART-п13">ART-п13</option>
<option id="103" value="ART-п14">ART-п14</option>
<option id="104" value="ART-п15">ART-п15</option>
<option id="105" value="ART-п16">ART-п16</option>
</optgroup>
<optgroup label="Наименование подкатегории 2">
<option id="106" value="ART-п21">ART-п21</option>
<option id="107" value="ART-п22">ART-п22</option>
<option id="108" value="ART-п23">ART-п23</option>
<option id="109" value="ART-п24">ART-п24</option>
</optgroup>
<optgroup label="Наименование подкатегории 10">
<option id="110" value="ART-п101">ART-п101</option>
<option id="111" value="ART-п102">ART-п102</option>
<option id="112" value="ART-п103">ART-п103</option>
<option id="113" value="ART-п104">ART-п104</option>
<option id="114" value="ART-п105">ART-п105</option>
</optgroup>
</select>
<br><br>
<input type=text size=4 maxlength=5 onChange="javascript:CalcSum(this);" onKeyUp="javascript:CalcSum(this);" id="200" name='' value='0'>
<br><br>
<input name=SumT type=hidden><span id=TextSum>0 руб.</span>
</form>

Цитата:

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

Мне же необходимо чтоб цена бралась в зависимости от выбора в select артикула товара

Одного артикула на клиенте мало... Нужна именно цена товара. Её нужно где-то хранить на странице... Либо запрашивать на сервере.

цена вбита в id <option> каждого артикула, думаю в эту сторону потому что в калькуляторе берется цена из id input'a

Цитата:

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

цена вбита в id <option>

Тогда взять это можно так

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
</style>
<script>
function Get() {
	var o=document.getElementById("articul_1")
	var i=o.selectedIndex
	alert(o.options(i).id)
}
</script>
</head>
<body>
<form name=MenuF>
	<br>Артикул
	<select id="articul_1" class="select">
		<optgroup label="Наименование подкатегории 1">
			<option id="100" value="ART-п11">ART-п11</option>
			<option id="101" value="ART-п12">ART-п12</option>
			<option id="102" value="ART-п13">ART-п13</option>
			<option id="103" value="ART-п14">ART-п14</option>
			<option id="104" value="ART-п15">ART-п15</option>
			<option id="105" value="ART-п16">ART-п16</option>
		</optgroup>
		<optgroup label="Наименование подкатегории 2">
			<option id="106" value="ART-п21">ART-п21</option>
			<option id="107" value="ART-п22">ART-п22</option>
			<option id="108" value="ART-п23">ART-п23</option>
			<option id="109" value="ART-п24">ART-п24</option>
		</optgroup>
		<optgroup label="Наименование подкатегории 10">
			<option id="110" value="ART-п101">ART-п101</option>
			<option id="111" value="ART-п102">ART-п102</option>
			<option id="112" value="ART-п103">ART-п103</option>
			<option id="113" value="ART-п104">ART-п104</option>
			<option id="114" value="ART-п105">ART-п105</option>
		</optgroup>
	</select>
	<input type='button' value='Get' onclick='Get()'>
</form>
</body>
</html>

Спасибо, стало понятнее :) а как теперь полученное значение o.options(i).id вставить в

<input type=text size=4 maxlength=5 onChange="javascript:CalcSum(this);" onKeyUp="javascript:CalcSum(this);" id="200" name='' value='0'>

(это 42 строка последнего моего листинга). я так понимаю, что надо заменить this, чтоб не читало id input'a, но у меня не получается, не работает. подскажите как...

Цитата:

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

id="200"

Фиговое ИД :-E
ИД должно начинаться хотябы с некой буквы...

Цитата:

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

у меня не получается

Что именно?

id="200" у input'a - это цена которую берет калькулятор. мне же надо чтоб калькулятор брал цену из id option.
пробую так

function Get() { 
    var o=document.getElementById("articul_1") 
    var i=o.selectedIndex 
    art_price = o.options(i).id
}

<input type=text size=4 maxlength=5 onChange="javascript:CalcSum(art_price);" onKeyUp="javascript:CalcSum(art_price);" name='' value='0'>

это не работает у меня, да и не могу въехать до сих пор в эти переменные JS :) PHP в этом отношении для понимания проще

Цитата:

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

это цена которую берет калькулятор

Вона чё...

Цитата:

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

надо чтоб калькулятор брал цену из id option

Таки найди строку где "калькулятор" "берёт" эту цену и вставь функцию Get()...

P.S.
Переменные во всех языках ведут себя одинаково. Различие лишь в "видимости" и уровне "типизированности"...

Собственно не смог удержатся, понимаю, для автора уже поздно ответ писать, но в гугле ещё много людей, которые ищут решение, поэтому, как сделал я, чтобы цена бралась из селекта:
Функция обработки списков и вызов функции ровно такой же, как и у автора, ничего не менял:

(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']});});

Функция расчёта:

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

HTML форма:

<form name=MenuF>
<div id="calctitle">Тип кузова:</div>
	<select id="category_1" class="select">
    <option value="Цельнометаллический фургон">Цельнометаллический фургон</option>
    <option value="Изотермическая будка">Изотермическая будка</option>
    <option value="Изотермический с гидробортом">Изотермический с гидробортом</option>
    <option value="Рефрижератор с гидробортом">Рефрижератор с гидробортом</option>
    <option value="Рефрижератор">Рефрижератор</option>
	</select>
<div id="calctitle">Грузоподъемность:</div>
	<select id="subcategory_1" class="select">
	<optgroup label="Цельнометаллический фургон">
    <option value="1ton">1 тонна</option>
    <option value="2ton">1,7 тонн</option>
    <option value="3ton">2,5 тонн</option>
	</optgroup>
	<optgroup label="Изотермическая будка">
    <option value="4ton">2,5 тонн</option>
	</optgroup>
	<optgroup label="Изотермический с гидробортом">
    <option value="5ton">10 тонн</option>
	</optgroup>
	<optgroup label="Рефрижератор с гидробортом">
    <option value="6ton">10 тонн</option>
	</optgroup>
	<optgroup label="Рефрижератор">
    <option value="7ton">20 тонн</option>
	</optgroup>
	</select>
<div id="calctitle">Объем кузова:</div>
	<select id="articul_1" name="rar" class="select">
	<optgroup label="1ton">
<option id="400" value="6">7,94 м.куб.</option>
	</optgroup>
	<optgroup label="2ton">
<option id="400" value="6">9,07 м.куб.</option>
	</optgroup>
	<optgroup label="3ton">
<option id="470" value="7">13,64 м.куб.</option>
	</optgroup>
	<optgroup label="4ton">
	<option id="500" value="7">15,54 м.куб.</option>
	<option id="500" value="7">18,48 м.куб.</option>
	</optgroup>
	<optgroup label="5ton">
<option id="800" value="8">9,69 м.куб.</option>
	</optgroup>
	<optgroup label="6ton">
<option id="900" value="8">44,10 м.куб.</option>
	</optgroup>
	<optgroup label="7ton">
<option id="1000" value="8">83,30 м.куб.</option>
	</optgroup>
</select>
<br><br>
<input type="button" onClick="javascript:CalcSum();" value="Расчитать">
<br><br>
<div id=TextSum></div>
</form>

RedLynx, благодарю от души за ответ :) прям "взрыв из прошлого"...