Зависимый список с выводом стоимости. Нужна помощь
Вложений: 1
Добрый день уважаемые форумчане!
На просторах данного форума нашел темку от 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,
:blink:
function CalcSum(){
var o=document.getElementById("articul_1");
document.getElementById('TextSum').innerHTML = o.value + " руб.";
}
|
MrZlo,
Цитата:
if ((m1 > 0)) {
sum = m1;
}
|
Огромное спасибо! Помогло! Как и ожидал что просто что то намудрил )
Еще пару вопросов: 1. Как заблокировать подкатегорию, до тех пор пока не выбрана главная категория? 2. Как сделать что бы с сумма выводилась без нажатия на кнопку "Расчитать стоимость"? |
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>
|
Скрипт для зависимых списоков
(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,
Цитата:
https://learn.javascript.ru/introduction-browser-events |
| Часовой пояс GMT +3, время: 00:05. |