added observer for select

Author: olton

build/metro.all.js

@@ -29673,7 +29673,8 @@ onmessage = function (event) {\
             init: function( options, elem ) {
                 this._super(elem, options, SelectDefaultConfig, {
                     list: null,
-                    placeholder: null
+                    placeholder: null,
+                    observer: null,
                 });
 
                 return this;
@@ -29946,6 +29947,21 @@ onmessage = function (event) {\
                     this.enable();
                 }
 
+                this.observer = new MutationObserver(this._updateSelect.bind(this));
+                this.observer.observe(element[0], {
+                    childList: true,
+                    subtree: true
+                });
+            },
+
+            _updateSelect: function(mutation){
+                for (let record of mutation) {
+                    if (record.type === 'childList') {
+                        if (record.addedNodes.length || record.removedNodes.length) {
+                            this._createOptions();
+                        }
+                    }
+                }
             },
 
             _createEvents: function(){

build/metro.js

@@ -62,7 +62,8 @@
         init: function( options, elem ) {
             this._super(elem, options, SelectDefaultConfig, {
                 list: null,
-                placeholder: null
+                placeholder: null,
+                observer: null,
             });
 
             return this;
@@ -335,6 +336,21 @@
                 this.enable();
             }
 
+            this.observer = new MutationObserver(this._updateSelect.bind(this))
+            this.observer.observe(element[0], {
+                childList: true,
+                subtree: true
+            });
+        },
+
+        _updateSelect: function(mutation){
+            for (let record of mutation) {
+                if (record.type === 'childList') {
+                    if (record.addedNodes.length || record.removedNodes.length) {
+                        this._createOptions()
+                    }
+                }
+            }
         },
 
         _createEvents: function(){

build/metro.js.map

@@ -106,9 +106,20 @@ <h1>Select test page</h1>
     <br>
     <br>
     <div class="example">
-        <div class="d-flex flex-row no-wrap flex-align-start">
-            <select id="select3" data-role="select" data-prepend="Select item:"></select>
-            <button class="button" onclick="fillSelect()">Fill select</button>
+        <div class="row">
+            <div class="cell-md-6">
+                <div class="d-flex flex-row no-wrap flex-align-start">
+                    <select id="select3" data-role="select" data-prepend="Select item:"></select>
+                    <button class="button" onclick="fillSelect()">Fill select</button>
+                </div>
+
+            </div>
+            <div class="cell-md-6">
+                <div class="d-flex flex-row no-wrap flex-align-start">
+                    <select id="select3_1" data-role="select" data-prepend="Select item:"></select>
+                    <button class="button" onclick="fillSelect3_1()">Fill select</button>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -175,6 +186,12 @@ <h1>Select test page</h1>
         select.val("");
     }
 
+    function fillSelect3_1(){
+        const select = $("#select3_1")
+        select.append($("<option>").attr("value", "value_1").text(`value_1`))
+        select.append($("<option>").attr("value", "value_2").attr("selected", "selected").text(`value_2`))
+    }
+
     // sel.on("change", function () {
     //     console.log("changed");
     // });