Create customSelect.js

Author: qasimali09

customSelect.js

@@ -0,0 +1,78 @@
+const generateSelect = (target) => {
+
+    //add custom select structure
+    function wrap(el, classes, ids) {
+        let wrapper = document.createElement( 'div' );
+        let innerWrapper = document.createElement( 'ul' );
+        let label = document.createElement( 'div' );
+        el.parentNode.insertBefore(wrapper, el);
+        let classList = classes.split(' ').filter(v => v !== '')
+        wrapper.classList.add( ...classList );
+        wrapper.setAttribute('id', ids);
+        innerWrapper.classList.add( 'options' );
+        label.classList.add( 'label' );
+        wrapper.appendChild(el);
+        wrapper.appendChild(label);
+        wrapper.appendChild(innerWrapper);
+    }
+
+    //get all select elements
+    const select = document.querySelectorAll( target );
+    for(e of select){
+
+        //get select classes
+        const classes = e.classList.value;
+        const ids = e.getAttribute('id');
+
+        // add wrapper in select element
+        wrap(e, `select ${classes}`, ids);
+
+        // add custom select options
+        const options = e.querySelectorAll( 'option' );
+        for(let i = 0; i < options.length; i++){
+            let html = `<li value='${options[i].value}'>${options[i].innerText}</li>`;
+            e.parentNode.querySelector( '.options' ).innerHTML += html;
+        }
+
+        //add options and label
+        e.parentNode.querySelector( '.label' ).innerHTML = e.getAttribute('aria-placeholder') || 'select';
+
+    }
+
+    //change label value when user select option
+    let selectLabel =  document.querySelectorAll('.select .label');
+    selectLabel.forEach(e => {
+        e.addEventListener('click', () => {
+            if(e.parentNode.classList.contains('active')){
+                e.parentNode.classList.remove('active');
+            }else{
+                e.parentNode.classList.add('active');
+            }
+        });
+    });
+
+    //change select value when user select option
+    let selectOptions =  document.querySelectorAll('.select .options > li');
+    selectOptions.forEach(e => {
+        e.addEventListener('click', () => {
+            e.closest(".select").querySelector('.label').innerHTML = e.innerHTML;
+            e.closest(".select").classList.remove('active');
+            e.closest(".select").querySelector('select').value = e.getAttribute("value");
+        });
+    });
+
+    //remove active class when user click outside
+    let outsideSelect =  document.querySelectorAll('.select');
+    outsideSelect.forEach(elm => {
+        document.addEventListener('click', (e) => {
+            if(!elm.contains(e.target)){
+                elm.classList.remove('active')
+            }
+        })
+    })
+
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+   generateSelect('select');
+})