Раскрывающийся список select и несколько баз данных

173
22 июля 2019, 00:50

Допустим есть объект 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});
Answer 1

Как то так:

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>

READ ALSO
Два свайп меню, как сделать открытие/закрытие в зависимости от жеста?

Два свайп меню, как сделать открытие/закрытие в зависимости от жеста?

Интересуют рабочие примеры с несколькими разными меню, которые также открываются/закрываются с помощью свайпаНапример меню 1 (поиск), открывается...

140
Как с помощью свайпа добавлять/удалять классы?

Как с помощью свайпа добавлять/удалять классы?

Подскажите пожалуйста как на сенсорных экранах с помощью свайпа добавлять/удалять классы, например если двигаешь пальцем слева-на-право...

172
Ошибка ноды (node:22205) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead

Ошибка ноды (node:22205) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead

Поскольку совсем не владею JS, не знаю как правильно и куда прописать в теле скрипта путь к файлу, чтобы заработалоСкрипт отсюда: https://github

151
Загрузка файла вместе с другими данными в одном запросе POST используя Jquery и Ajax

Загрузка файла вместе с другими данными в одном запросе POST используя Jquery и Ajax

У меня есть проблема: "formDataappend("id_element",1)" не добавляет поле в formData

129