CG-SELECT

Default select

              const dropdown = new CGSelect({
                selector: '.cg-dropdown_one', 
                placeholder: 'Choose a car', 
                lable: 'EXAMPLE', 
                items: [
                  'BMW',
                  {
                    id: '213sade',
                    title: 'Opel',
                    value: 1,
                  },
                  'Mersedes', 
                  'MAN',  
                  'Ferari', 
                ],
                styles: {
                  head: {
                    width: '830px', 
                  },
                  list: {
                    width: '824px', 
                  },
                },
              });

Default select with function nativeSelectMode

*Native select appears on mobile resolution. 

              const dropdown = new CGSelect({
                selector: '.cg-dropdown_one', 
                placeholder: 'Choose a car', 
                nativeSelectMode: true,
                items: [
                  'BMW',
                  {
                    id: '213sade',
                    title: 'Opel',
                    value: 1,
                  },
                  'Mersedes', 
                  'MAN',  
                  'Ferari', 
                ],
                styles: {
                  head: {
                    width: '830px', 
                  },
                  list: {
                    width: '824px', 
                  },
                },
              });

Default select with function listDisplayMode

*When using this method, the selection sheet appears as a modal window. 

              const dropdown = new CGSelect({
                selector: '.cg-dropdown_listDisplayMode', 
                placeholder: 'Choose a car', 
                listDisplayMode: true,
                items: [
                  'BMW',
                  {
                    id: '213sade',
                    title: 'Opel',
                    value: 1,
                  },
                  'Mersedes', 
                  'MAN',  
                  'Ferari', 
                ],
                styles: {
                  head: {
                    width: '830px', 
                  },
                  list: {
                    width: '824px', 
                  },
                },
              });

Select with data from URL

            const dropdown = new CGSelect({
              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', 
                },
              },
            });

Categories

            const dropdown = new CGSelect({
              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,
            });

Button control

            const dropdown = new CGSelect({
              selector: '.cg-dropdown_usedBtn', 
              placeholder: 'Choose a car', 
              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,
            });

Function disabled

            const dropdown = new CGSelect({
              selector: '.cg-dropdown_checkboxDisable', 
              placeholder: 'Choose a car', 
              searchMode: true,
              items: [
                'BMW',
                {
                  id: '213sade',
                  title: 'Opel',
                  value: 1,
                },
                'Mersedes', 
                'MAN',  
                'Ferari', 
              ],
              styles: {
                head: {
                  width: '830px', 
                },
                list: {
                  width: '824px', 
                },
                placeholder: {
                  maxWidth: '500px ',
                },
              },
              multiselect: true,
            });