bz-select

buildoz.css

@@ -32,6 +32,7 @@ bz-select option{
     font-family: sans;
     font-size: .9rem;
     opacity: 0;
+    pointer-events: none; 
     transition:
         margin-top 0.3s ease,
         opacity 0.3s ease;
@@ -39,6 +40,7 @@ bz-select option{
 bz-select option.open{
     margin: 2px 0 0 0;
     opacity: 1;
+    pointer-events: auto;
 }
 bz-select option:hover{
     background-color: #44F;

buildoz.js

@@ -28,11 +28,7 @@ class Buildoz extends HTMLElement {
     disconnectedCallback(){ // removed from the DOM
 
     }  
-    
-    attributeChangedCallback(name, oldValue, newValue) {
-        this.attr[name] = newValue
-        //console.log(`attr ${name} changed from ${oldValue} to ${newValue}`)
-    }
+
 
 }
 
@@ -40,10 +36,10 @@ class BZselect extends Buildoz {
     constructor(){
         super()
 
+        this.value = null
         this.open = false
         //defaults, can be changed by corresponding attributes
         this.attrs = {
-            size: 0,
             label: 'Select...',
         }
     }
@@ -55,29 +51,22 @@ class BZselect extends Buildoz {
         this.button.textContent =  this.attrs.label
         this.prepend(this.button)
         this.button.addEventListener('click', this.toggle.bind(this))
-
         this.options = this.querySelectorAll('option')
-        // let toShow = this.attrs.size
-        // for(const opt of this.options){
-        //     if(toShow>0){
-        //         opt.style.display = 'block'
-        //     } else {
-        //         opt.style.display = 'none'
-        //     }
-        //     toShow--
-        // }
+        for(const opt of this.options){
+            opt.addEventListener('click',(evt) => { this.onOption(evt.target.value) })
+        }
     }
     
     static get observedAttributes(){
-        return [...super.observedAttributes, 'label', 'size']
+        return([...super.observedAttributes, 'label'])
     }
 
     attributeChangedCallback(name, oldValue, newValue) {
-        super.connectedCallback()
+        this.attrs[name] = newValue
         // on the fly changes here
     }
 
-    toggle(evt){
+    toggle(){
         for(const opt of this.options){
             if(this.open) opt.classList.remove('open')
             else opt.classList.add('open')
@@ -85,6 +74,13 @@ class BZselect extends Buildoz {
         this.open = !this.open
     }
 
+    onOption(value){
+        this.value =value
+        this.toggle()
+        const opt = Array.from(this.options).find(opt => opt.value==value)
+        this.button.textContent = opt.textContent
+    }
+
     fill(opts){
         this.el.innerHTML =''
         if(!Array.isArray(opts)) opts = [opts]