Допустим есть объект organisations, содержащий в каждой ячейке объект, включающий в себя наименование организации, ИНН, ОГРН и адрес, примерно так:
organisations = [
{
name:"ООО «КБМ»",
inn:"5018048203",
ogrn:"1025002031405",
address:"141075, Московская обл., г. Королев, пр. Космонавтов, д. 12А",
address1:"129110, г. Москва, ул. Гиляровского д. 65, стр. 1, пом. XVI Ч., ком. 39, эт. 5",
nameLong:"ООО Компания «Большая Медведица»"
},
{
name:"ООО «АТЕ ФУД»",
inn:"7731284520",
ogrn:"1157746508040",
address:"121596, Город Москва, Улица Горбунова, Дом 2, Строение 204, Комната 48"
},
{
name:"ООО «Смартори»",
inn:"7733223201",
ogrn:"1157746154312",
address:"125445, город Москва, шоссе Ленинградское, дом 112, корпус 4"
}
]
Есть еще массивы persons and arbitrationManagers аналогичного вида. Длина массивов динамическая и заранее неизвестная.
Я создал раскрывающийся список select следующего вида, содержащий Все 3 массива:
Теперь мне нужно написать onchange функцию - обработчик события и повесить на раскрывающийся список так, чтобы он выбрал один из трех соответствующих массивов, затем соответствующую позицию в массиве и затем данные из него подставил в документ. Как это оптимальнее всего реализовать?
P.S.: функция для составления списка. Аргументы: exportList
= лист, который строится, dataBase
= объект из которого данные берутся (в данном случае nonclient
).
function setList(exportList, dataBase){
exportList.textContent = '';
let blankOpt = document.createElement('option');
blankOpt.textContent='Выберите значение';
blankOpt.className += 'grey';
exportList.appendChild(blankOpt);
for (i in dataBase) {
let descriptionOption = document.createElement('option');
descriptionOption.textContent=dataBase[i].description;
descriptionOption.className += 'divider';
exportList.appendChild(descriptionOption);
for (let j=0; j<dataBase[i].length; j++) {
var opt = document.createElement('option');
opt.setAttribute('ref', dataBase[i][j]);
console.log('opt.ref =',opt.ref);
opt.textContent=(dataBase[i][j].name);
exportList.appendChild(opt);
}
}
}
Используемая база данных
nonclient = {};
nonclient.yl = [
{
name:"ООО «КБМ»",
inn:"5018048203",
ogrn:"1025002031405",
address:"141075, Московская обл., г. Королев, пр. Космонавтов, д. 12А",
address1:"129110, г. Москва, ул. Гиляровского д. 65, стр. 1, пом. XVI Ч., ком. 39, эт. 5",
nameLong:"ООО Компания «Большая Медведица»"
},
{
name:"ООО «АТЕ ФУД»",
inn:"7731284520",
ogrn:"1157746508040",
address:"121596, Город Москва, Улица Горбунова, Дом 2, Строение 204, Комната 48"
},
{
name:"ООО «Смартори»",
inn:"7733223201",
ogrn:"1157746154312",
address:"125445, город Москва, шоссе Ленинградское, дом 112, корпус 4"
}
]
nonclient.fl = [
{
name:'Петров Петр Петрович',
address:'г. Сочи ул. Зеленая д. 25'
},
{
name:'Сидоров Сидор Сидорович',
address:'г. Нарьян-Мар Ленинский проспект д.1'
}
]
nonclient.au = [
{
name:'Михайлов Михаил Михайлович',
inn:'987654321',
sro:'Союз Арбитражных управляющих г. Бердянска',
address:'г. Бердянск, а/я "Михайлов М.М."'
}
]
nonclient.allegiance ='nonclient'
nonclient.yl.property='yl';
nonclient.yl.description=' - Организации - ';
nonclient.fl.property='fl';
nonclient.fl.description=' - Физические лица - ';
nonclient.au.property='au';
nonclient.au.description=' - Арбитражные управляющие - ';
Object.defineProperty(nonclient, 'allegiance', {enumerable: false});
Object.defineProperty(nonclient.yl, 'property', {enumerable: false});
Object.defineProperty(nonclient.yl, 'description', {enumerable: false});
Object.defineProperty(nonclient.fl, 'property', {enumerable: false});
Object.defineProperty(nonclient.fl, 'description', {enumerable: false});
Object.defineProperty(nonclient.au, 'property', {enumerable: false});
Object.defineProperty(nonclient.au, 'description', {enumerable: false});
Как то так:
const selectEl = document.querySelector("select");
const organisations = [
{
name: "ООО «КБМ»",
inn: "5018048203",
ogrn: "1025002031405",
address: "141075, Московская обл., г. Королев, пр. Космонавтов, д. 12А",
address1: "129110, г. Москва, ул. Гиляровского д. 65, стр. 1, пом. XVI Ч., ком. 39, эт. 5",
nameLong: "ООО Компания «Большая Медведица»"
},
{
name: "ООО «АТЕ ФУД»",
inn: "7731284520",
ogrn: "1157746508040",
address: "121596, Город Москва, Улица Горбунова, Дом 2, Строение 204, Комната 48"
},
{
name: "ООО «Смартори»",
inn: "7733223201",
ogrn: "1157746154312",
address: "125445, город Москва, шоссе Ленинградское, дом 112, корпус 4"
}
]
const yl = [
{
name: "ООО «КБМ»",
inn: "5018048203",
ogrn: "1025002031405",
address: "141075, Московская обл., г. Королев, пр. Космонавтов, д. 12А",
address1: "129110, г. Москва, ул. Гиляровского д. 65, стр. 1, пом. XVI Ч., ком. 39, эт. 5",
nameLong: "ООО Компания «Большая Медведица»"
},
{
name: "ООО «АТЕ ФУД»",
inn: "7731284520",
ogrn: "1157746508040",
address: "121596, Город Москва, Улица Горбунова, Дом 2, Строение 204, Комната 48"
},
{
name: "ООО «Смартори»",
inn: "7733223201",
ogrn: "1157746154312",
address: "125445, город Москва, шоссе Ленинградское, дом 112, корпус 4"
}
]
const fl = [
{
name: 'Петров Петр Петрович',
address: 'г. Сочи ул. Зеленая д. 25'
},
{
name: 'Сидоров Сидор Сидорович',
address: 'г. Нарьян-Мар Ленинский проспект д.1'
}
]
const au = [
{
name: 'Михайлов Михаил Михайлович',
inn: '987654321',
sro: 'Союз Арбитражных управляющих г. Бердянска',
address: 'г. Бердянск, а/я "Михайлов М.М."'
}
];
const extendWithData = (newData, parentName, parentId) => {
return [
{
id: parentId,
name: parentName,
isDivider: true
},
...newData.map(el => ({...el, parentId}))
]
};
const optionList = [
...extendWithData(organisations, "- Организации -", "orgs"),
...extendWithData(yl, "- Юр. лица -", "yls"),
...extendWithData(fl, "- Физ. лица -", "fls"),
...extendWithData(au, "- Арбитражные управляющие -", "aus"),
];
const renderList = (element, data) => {
element.textContent = '';
data = [
{
name: "Выберите значение",
isPlaceholder: true
},
...data
]
data.forEach(el => {
const {
id,
name,
parentId,
isPlaceholder,
isDivider
} = el;
const optionEl = document.createElement('option');
optionEl.textContent = name;
isPlaceholder && optionEl.classList.add('grey');
isDivider && optionEl.classList.add('divider');
if (!isPlaceholder && !isDivider) {
/**
* Не уверен зачем вам хранить данные в таком виде, но оставил на всякий
*/
optionEl.setAttribute('data-ref', JSON.stringify(el));
optionEl.value = JSON.stringify(el);
/**
* Советую делать так как написано ниже
*
* optionEl.setAttribute('data-id', id);
* optionEl.setAttribute('data-parent_id', parentId);
*/
}
element.appendChild(optionEl);
});
};
renderList(selectEl, optionList);
selectEl.addEventListener("change", (e) => {
/**
* Здесь Ваш функцонал
*/
const value = e.target.value;
console.log(value);
});
.grey {
color: grey;
}
.divider {
font-weight: 700;
}
<select></select>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Интересуют рабочие примеры с несколькими разными меню, которые также открываются/закрываются с помощью свайпаНапример меню 1 (поиск), открывается...
Подскажите пожалуйста как на сенсорных экранах с помощью свайпа добавлять/удалять классы, например если двигаешь пальцем слева-на-право...
Поскольку совсем не владею JS, не знаю как правильно и куда прописать в теле скрипта путь к файлу, чтобы заработалоСкрипт отсюда: https://github
У меня есть проблема: "formDataappend("id_element",1)" не добавляет поле в formData