Нужна помощь в реализайии

[ArtemGavrilenko]

Добрый день!
Постараюсь описать ситуацию в двух словах
Есть некий массив

var goods = [
				{		
					name: {
						ru:'МТЗ',
						ua: 'МТЗ',
					},
					model: '82.1',
					country: {
						ru:'Беларусь',
						ua: 'Білорусь',
					},
					price: '1.11',
					images: 'img/belarus/mtz/МТЗ_82.1.jpeg',
				},
....
}

Нужно реализовать динамическую форму в которую будут подставляться данные из массива, в таком формате
Марка техники -> Выпадающий список
Модель техники -> Выпадающий список
Страна производитель -> Выпадающий список

Я пишу вот так (смотрю как реализовано здесь Вывод информации из массива в таблицу)

var form = document.createElement('form');
		        	form.idName = 'form-lizing';
		        		var input1 = document.createElement('input');
		        		input1.idName = 'input-lizing1';
		        		document.getElementById('input-lizing1').val = 'Марка техники';
		        		document.getElementById('table-lizing-traktor').appendChild(form);
		        		document.getElementById('form-lizing').appendChild(input1);

Но ничего не получается, скажите с чего начать? Если из изучения JavaScript то я этим и занимаюсь

[krasovsky]

Можно прибегнуть к библиотекам вроде этой https://github.com/blueimp/JavaScript-Templates
Создаешь шаблон в котором определяешь переменные, можно организовать цикл for и вывести n-количество элементов и тд.
Есть множество других подобных

[ArtemGavrilenko]

Я только учу чистый JS без использование сторонних библиотек, та и нужно все это организовать на чистом JS

[рони]

ArtemGavrilenko,
попробуйте для начала написать ваш выпадающий список на html в итоге

[ArtemGavrilenko]

<form id="model-traktor">
					<input type="label" value="Марка техники" class="input-label-marka"><br />
					<select>
						<option>...</option>
						<option>МТЗ</option>					
					</select>
					<br />

					<input type="label" value="Модель техники" class="input-label-model"><br />
					<select>
						<option>...</option>
						<option>82.1</option>
						<option>1221.2</option>					
					</select>
					<br />

					<input type="label" value="Страна производитель" class="input-label-strana"><br />
					<select>
						<option>...</option>
						<option>Белорусь</option>					
						<option>Украина</option>					
					</select>	
					<br />			
				</form>

[devote]

<select id="_make">
  <option value="">- Марка -</option>
</select>
<select id="_model">
  <option value="">- Модель -</option>
</select>
<select id="_country">
  <option value="">- Страна -</option>
</select>
<script>
var goods = [
  {
    name: {
      ru:'МТЗ',
      ua: 'МТЗ'
    },
    model: '82.1',
    country: {
      ru:'Беларусь',
      ua: 'Білорусь'
    },
    price: '1.11',
    images: 'img/belarus/mtz/МТЗ_82.1.jpeg'
  },
  {
    name: {
      ru:'МТЗ',
      ua: 'МТЗ'
    },
    model: '82.1',
    country: {
      ru:'Россия',
      ua: 'Россия'
    },
    price: '1.11',
    images: 'img/belarus/mtz/МТЗ_82.1.jpeg'
  },
  {
    name: {
      ru:'МТЗ2',
      ua: 'МТЗ2'
    },
    model: '82.12',
    country: {
      ru:'Беларусь',
      ua: 'Білорусь'
    },
    price: '1.11',
    images: 'img/belarus/mtz/МТЗ_82.1.jpeg'
  },
  {
    name: {
      ru:'МТЗ3',
      ua: 'МТЗ3'
    },
    model: '82.13',
    country: {
      ru:'Беларусь',
      ua: 'Білорусь'
    },
    price: '1.11',
    images: 'img/belarus/mtz/МТЗ_82.1.jpeg'
  }
];

var language = 'ru';

function updateSelect(elem, list) {
  var _default = elem.children[0];
  while(elem.firstChild) {
    elem.removeChild(elem.firstChild);
  }
  elem.appendChild(_default);
  if (list) {
    for(var key in list) {
      if (list.hasOwnProperty(key)) {
        var option = document.createElement('option');
        option.innerHTML = option.value = key;
        elem.appendChild(option);
      }
    }
  }
  return elem;
};

(function(goods, language) {
  var _make = document.getElementById('_make');
  var _model = document.getElementById('_model');
  var _country = document.getElementById('_country');

  var optionsData = {};
  for(var i = 0; i < goods.length; i++) {
    var _vName = goods[i].name[language];
    var _vModel = goods[i].model;
    var _vCountry = goods[i].country[language];
    optionsData[_vName] = optionsData[_vName] || {};
    optionsData[_vName][_vModel] = optionsData[_vName][_vModel] || {};
    optionsData[_vName][_vModel][_vCountry] = optionsData[_vName][_vModel][_vCountry] || {};
  }

  updateSelect(_make, optionsData).onchange = function() {
    updateSelect(_model, optionsData[_make.value]).onchange();
  };
  _model.onchange = function() {
    updateSelect(_country, (optionsData[_make.value]||{})[_model.value]);
  }
})(goods, language);
</script>

[рони]

devote,
на всякий случай

var _default = elem.children[0];
  while(elem.firstChild) {
    elem.removeChild(elem.firstChild);
  }
  elem.appendChild(_default);

=>

elem.options.length = 1;

[devote]

рони,
ну понятно дело что проверки натыкать нужно не тока тут) Это же черновой вариант.

[рони]

проверки

непонял
просто 5 строк заменяются одной

[devote]

просто 5 строк заменяются одной

а ты про это... ну да.. туплю) Забей