Добрый день! Это наверное наглость с моей стороны но все же. Нужна ваша помощь в следующем.
Есть массив
var goods = [
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: 'МТЗ 82.1',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.11',
transmission : '18/4',
engine: '59.6/81',
wheel_formula: '4X4',
images: 'img/belarus/mtz/МТЗ_82.1.jpeg',
},
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: 'МТЗ 892',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.21',
transmission: '18/4',
engine: '65/88.7',
wheel_formula: '4X4',
images: 'img/belarus/mtz/МТЗ_892.jpeg',
},
]
var percentage = {
advance : '30', //аванс
insurance : '3.1', //страховка
commission : '1', //комиссия
}
и жалкое подобие функции
var _build = document.getElementById('_build').onclick = function () {
var table_first = document.createElement('table');
var tbody_first = document.createElement('tbody');
table_first.setAttribute('border', '1');
table_first.setAttribute('color', '000');
var tr1 = document.createElement('tr');
var tr2 = document.createElement('tr');
var tr3 = document.createElement('tr');
tr1.innerHTML = '<td><b>Аванс</b></td><td> ' + percentage['advance'] + '%</td><td> 59 661 грн. </td>';
tr2.innerHTML = '<td><b>Страховка (ежегодно)</b></td><td>' + percentage['insurance'] + '%</td><td> 6 165 грн. </td>';
tr3.innerHTML = '<td><b>Коммисия</b></td><td>' + percentage['commission'] + '% разово</td><td>1 988,7</td>';
document.getElementById('table-first').appendChild(tr1);
document.getElementById('table-first').appendChild(tr2);
document.getElementById('table-first').appendChild(tr3);
var lizing_plateju = document.getElementById('lizing-plateju').innerHTML = "Лизинговые платежи";
var table_last = document.createElement('table');
var tbody = document.createElement('tbody');
table_last.setAttribute('border', '1');
table_last.setAttribute('color', '000');
var tr4 = document.createElement('tr');
var tr5 = document.createElement('tr');
var tr6 = document.createElement('tr');
tr4.innerHTML = '<td> Лизинг на 12 месяцев </td><td> Лизинг на 24 месяца </td>';
tr5.innerHTML = '<td> Ежемесячный платеж<br />составит - <b> 11 664 грн. </b></td><td> Ежемесячный платеж<br />составит - <b> 6 562 грн. </b></td>';
tr6.innerHTML = '<td colspan="2">Возможен расчет адаптированого графика <br /> погашения с учетом сезонности бизнеса <td>';
document.getElementById('table-last').appendChild(tr4);
document.getElementById('table-last').appendChild(tr5);
document.getElementById('table-last').appendChild(tr6);
var image = document.getElementById('image').innerHTML = '<img src="' + goods[0]['images'] + '"width=320px; height=320px" />';
var model_traktor = document.getElementById('model_traktor').innerHTML = goods[0]['model'];
var param = document.getElementById('param').innerHTML = "Параметры: ";
var table_param = document.createElement('table');
var tbody = document.createElement('tbody');
var tr7 = document.createElement('tr');
var tr8 = document.createElement('tr');
var tr9 = document.createElement('tr');
tr7.innerHTML = '<td><b>Трансмиссия </b>(вперед / назад)<td><td>.........<td><td>' + goods[0]['transmission'] + '</td>' ;
tr8.innerHTML = '<td><b>Двигатель </b>(мощность кВт/л.с.)<td><td>.........<td><td>' + goods[0]['engine'] + '</td>';
tr9.innerHTML = '<td><b>Колесная формула </b><td><td>.........<td><td>' + goods[0]['wheel_formula'] + '</td>';
document.getElementById('table-param').appendChild(tr7);
document.getElementById('table-param').appendChild(tr8);
document.getElementById('table-param').appendChild(tr9);
}
структура документа выглядит так
<select id="_make">
<option value="">...</option>
</select>
<select id="_model">
<option value="">...</option>
</select>
<select id="_country">
<option value="">...</option>
</select>
<input type="button" value="Показать характеристики" id="_build">
<div id="build_img_tabl">
<div id="table-first"></div>
<h3 id="lizing-plateju"></h3>
<div id="table-last"></div>
<div id="blok_image">
<div id="image"></div>
<h3 id="model_traktor"></h3>
<h4 id="param"></h4>
<div id="table-param"></div>
</div>
</div>
Первое что я не могу реализовать это если пользователь выберет из списка любой другой вариант, а не первый как я подставил, тоесть таблички должны заполнятся автоматически от результата выбора. Второе если нажимать на кнопку то будут создаваться новые элементы, а этого не нужно.