diff --git a/example/index.js b/example/index.js
index 55d9aaa..b964327 100644
--- a/example/index.js
+++ b/example/index.js
@@ -25,6 +25,11 @@ const dropdown = new CGSelect({
       width: '824px',
     },
   },
+  // multiselect: true,
+});
+
+dropdown.on('select', function (e) {
+  console.log(`this state: ${e}`);
 });
 
 // ------------------------------NativeSelect-----------------------
diff --git a/src/cg-select.ts b/src/cg-select.ts
index 371685d..9b250a3 100644
--- a/src/cg-select.ts
+++ b/src/cg-select.ts
@@ -914,4 +914,31 @@ export class CGSelect implements ICgSelect {
     const select: string = options[index].innerText;
     this.render(select);
   }
+
+  public on(state: string, callback: (state: any) => any) {
+    const options = this.element?.querySelectorAll('.list__item');
+
+    switch (state) {
+      case 'select':
+        options?.forEach((option: Element) => {
+          option.addEventListener('click', () => {
+            console.log('option:select', option.textContent);
+          });
+        });
+        callback(state);
+        break;
+      case 'close':
+        this.element!.addEventListener('click', () => {
+          console.log('list:close', this.list!.classList.contains('close'));
+        });
+        callback(state);
+        break;
+      case 'open':
+        this.element!.addEventListener('click', () => {
+          console.log('list:open', this.list!.classList.contains('open'));
+        });
+        callback(state);
+        break;
+    }
+  }
 }