Как выводить несколько значений подряд при клике?

Question

[TipTop89]

Есть селект, при клике выводится значение, подскажите как вывести множество значений как на на картинке:
. И при клике на значение что-бы оно могло удаляться? Спасибо

Comments

[scottparker]

это не реально
https://mdbootstrap.com/docs/standard/extended/mul...

Answer 1

[Александр Талалаев]

Ваш код грязный конечно, даже стили немного.
Вот я тоже набросал грязное решение. Вам я бы рекомендовал немного переверстать, но в целом(обратите внимание я добавил pointer-events none на .types-select__option-text в css на кодпене это видно)
Саму идею я думаю вы поймёте и под себя переделаете. Ниже код и кодпен.

//Данные по содержанию меню
const furnTypes = [
  {
    'id' : 1,
    'title' : 'Офисная&nbsp;<span>меб</span>ель'
  },
  {
    'id' : 2,
    'title' : 'Техника / сантехника'
  },
  {
    'id' : 3,
    'title' : 'Сборка кухни'
  },
];

//Каждое активно может быть только один раз
const activeMenuItems =   new Set();

const clickHandler = e => {
  if(activeMenuItems.add(parseInt(e.target.getAttribute("furn-id"))) ) {
    //Если поменялся перестроим меню
    updateActiveMenuItems(activeMenuItems);
  }  
};

//Строим меню на основе данных items, вставляем в target
//на элементы вешаем событие clickHandler
buildSelectMenu = (target, items, clickHandler) => 
{
  //создаем родителя
  const parentUl = document.createElement("ul");
  parentUl.classList.add('types-select__options');
  //Каждый из пунктов
  items.forEach(
    item => {
      const childLi = document.createElement("li");
      childLi.classList.add('types-select__option');
      childLi.setAttribute('furn-id', item['id']);
      childLi.addEventListener("click",clickHandler);
      const childTextBlock = document.createElement("div");
      childTextBlock.classList.add('types-select__option-text');
      // Лучше потом на setHtml заменить, но пока нет поддержки
      childTextBlock.innerHTML = item['title'];
      childLi.appendChild(childTextBlock);
      parentUl.appendChild(childLi);
    }
  )
  //Запихиваем туда куда нужно
  target.appendChild(parentUl);  
  return parentUl; 
}

const updateActiveMenuItems = ids => {
  
  const parent = document.querySelector('.types-select__active-items');
  parent.innerHTML = '';
  ids.forEach( id => {
    const curItem = furnTypes.find( el => el['id'] === id)
    const activeMenuItemEl = document.createElement("div");
    const activeMenuItemTitleEl = document.createElement("span");
    activeMenuItemTitleEl.innerHTML = curItem['title'];
    const activeMenuItemdeleteButtonEl = document.createElement("button");
    //Лучше через текстовую ноду
    activeMenuItemdeleteButtonEl.innerHTML = 'x';
    activeMenuItemdeleteButtonEl.setAttribute('active-furn-id', curItem['id']);
    
    activeMenuItemdeleteButtonEl.addEventListener("click", e => {
      //Чтобы кликалась не взирая на клик событие родителя
      if(e && e.stopPropagation) e.stopPropagation();
      
      if(activeMenuItems.delete(parseInt(e.target.getAttribute("active-furn-id"))) ) {
        //Если поменялся перестроим меню
         updateActiveMenuItems(activeMenuItems);
      } 
    }); 
    
    activeMenuItemEl.appendChild(activeMenuItemTitleEl);
    activeMenuItemEl.appendChild(activeMenuItemdeleteButtonEl);
    parent.appendChild(activeMenuItemEl);
    
  })
  
}

// Строим меню
const furnitureMenu = buildSelectMenu(
  document.querySelector('#furnitureMenu'), 
  furnTypes, 
  clickHandler
);

document.querySelector('.types-select__btn')
  .addEventListener("click", e => {
    // Странное имя класса, наверное должн быть types-select__menu_active
    document.querySelector('.types-select__menu').classList.toggle("_active");
} )

Comments

[TipTop89]

Подскажите а вообще правильно ли выводить данные блоков меню через js? в дальнейшем при натяжке не возникнут проблемы? я пытался переместить в html меню, но у меня перестает работать код