CG-SELECT

Дефолтный селект

              const dropdown = new DropDown({
                selector: '.cg-dropdown_one', 
                placeholder: 'Выберите авто', 
                lable: 'EXAMPLE', 
                items: [
                  'BMW',
                  {
                    id: '213sade',
                    title: 'Opel',
                    value: 1,
                  },
                  'Mersedes', 
                  'MAN',  
                  'Ferari', 
                ],
                styles: {
                  head: {
                    width: '830px', 
                  },
                  list: {
                    width: '824px', 
                  },
                },
              });

Селект с данными с URL

            const dropdown = new DropDown({
              selector: '.cg-dropdown_three', 
              placeholder: 'URL', 
              url: 'https://jsonplaceholder.typicode.com/users',            
              searchMode: true,
              darkTheme: false,
              language: 'ru',
              styles: {
                head: {
                  width: '830px', 
                },
                list: {
                  width: '824px', 
                },
              },
            });

Категории

            const dropdown = new DropDown({
              selector: '.cg-dropdown_categories', 
              placeholder: 'Выберите регион', 
              searchMode: true,
              items: [
                {
                  category: 'Russia',
                  categoryItems: [
                    {
                      id: '28qwds',
                      title: 'Москва',
                      value: 0,
                    },
                    'Ростов-на-дону',
                    'Саратов',
                    'Волгоград',
                    'Донецк',
                  ],
                },
                {
                  category: 'USA',
                  categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
                },
                {
                  category: 'France',
                  categoryItems: ['Paris'],
                },
              ],
              styles: {
                head: {
                  width: '830px', 
                },
                list: {
                  width: '824px', 
                },
                placeholder: {
                  maxWidth: '500px ',
                },
              },
              multiselect: true,
              multiselectTag: true,
            });

Управление с помошью кнопок

            const dropdown = new DropDown({
              selector: '.cg-dropdown_usedBtn', 
              placeholder: 'Выберите авто', 
              searchMode: true,
              items: [
                  'BMW',
                  {
                    id: '213sade',
                    title: 'Opel',
                    value: 1,
                  },
                  'Mersedes', 
                  'MAN',  
                  'max', 
              ],
              styles: {
                head: {
                  width:  '830px',
                  color:  'black',
                  backgroundColor:  'rgb(176 223 167)',
                },
                list: {
                  width:  '824px',
                  color:  'black',
                  backgroundColor:  'rgb(176 223 167)',
                },
                caret: {
                  borderTop:  '6px solid black',
                },
                search: {
                  backgroundColor:  '#d7ffff',
                  borderRadius:  '5px',
                  borderBottom:  'none',
                  width:  '95%',
                  color:  'black',
                },
              },
              multiselect: true,
            });

Функция disabled

            const dropdown = new DropDown({
              selector: '.cg-dropdown_checkboxDisable', 
              placeholder: 'Выберите авто', 
              lable: 'EXAMPLE', 
              items: [
                'BMW',
                {
                  id: '213sade',
                  title: 'Opel',
                  value: 1,
                },
                'Mersedes', 
                'MAN',  
                'Ferari', 
              ],
              styles: {
                head: {
                  width: '830px', 
                },
                list: {
                  width: '824px', 
                },
                placeholder: {
                  maxWidth: '500px ',
                },
              },
            });