​

const wrapper = document.querySelector('.wrapper');

const selectTemplate = `

  <select class="select">

    <option value="1">One</option>

    <option value="2">Two</option>

    <option value="3">Three</option>

    <option value="4">Four</option>

    <option value="5">Five</option>

  </select>

`

for (let i=0; i<3; i++) {

  wrapper.insertAdjacentHTML('beforeend', selectTemplate)

}

​

document.querySelectorAll('.select').forEach((selectEl) => {

  const instance = new mdb.Select(selectEl)  

})

​

const sel = document.querySelectorAll(".select");

const selInput = document.querySelectorAll(".select-input");

    sel.forEach(element => {

      element.addEventListener("change", function () {

        console.log("change ", this.value);

        document.getElementById("change").innerHTML = "change " + this.value;

      })

    })

    selInput.forEach(element => {

      element.addEventListener("focus", function () {

        console.log("focus ", this.value);

        document.getElementById("focus").innerHTML = "focus " + this.value;

      })

    })