Нужна помощь в реализайии
Добрый день!
Постараюсь описать ситуацию в двух словах Есть некий массив
var goods = [
{
name: {
ru:'МТЗ',
ua: 'МТЗ',
},
model: '82.1',
country: {
ru:'Беларусь',
ua: 'Білорусь',
},
price: '1.11',
images: 'img/belarus/mtz/МТЗ_82.1.jpeg',
},
....
}
Нужно реализовать динамическую форму в которую будут подставляться данные из массива, в таком формате Марка техники -> Выпадающий список Модель техники -> Выпадающий список Страна производитель -> Выпадающий список Я пишу вот так (смотрю как реализовано здесь http://javascript.ru/forum/dom-windo...v-tablicu.html)
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 то я этим и занимаюсь |
Можно прибегнуть к библиотекам вроде этой https://github.com/blueimp/JavaScript-Templates
Создаешь шаблон в котором определяешь переменные, можно организовать цикл for и вывести n-количество элементов и тд. Есть множество других подобных |
Я только учу чистый JS без использование сторонних библиотек, та и нужно все это организовать на чистом JS
|
ArtemGavrilenko,
попробуйте для начала написать ваш выпадающий список на html в итоге |
<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> |
<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; |
рони,
ну понятно дело что проверки натыкать нужно не тока тут) Это же черновой вариант. |
Цитата:
просто 5 строк заменяются одной |
Цитата:
|
| Часовой пояс GMT +3, время: 08:38. |