Нужна помощь в реализайии
Добрый день!
Постараюсь описать ситуацию в двух словах Есть некий массив 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, время: 09:42. |