<div class="p-3">

  <div class="mb-3">

    <select class="select" id="select">

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

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

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

    </select>

  </div>

  <button class="btn btn-danger">

    Give me Red

  </button>

  <button class="btn btn-success">

    Give me Green

  </button>

  <button class="btn btn-secondary">

    I hate those color

  </button>

</div>

​

const select = document.getElementById('select');

const [btnRed,btnGreen,btnReset] = document.querySelectorAll('button.btn')

​

btnRed.onclick = e => {

  select.closest('.select-wrapper').querySelector('.select-input').classList.remove('is-valid');

  select.closest('.select-wrapper').querySelector('.select-input').classList.add('is-invalid');

};

​

btnGreen.onclick = e => {

  select.closest('.select-wrapper').querySelector('.select-input').classList.add('is-valid');

  select.closest('.select-wrapper').querySelector('.select-input').classList.remove('is-invalid');

};

​

btnReset.onclick = e => {

  select.closest('.select-wrapper').querySelector('.select-input').classList.remove('is-valid');

  select.closest('.select-wrapper').querySelector('.select-input').classList.remove('is-invalid');

};

console.log(mdb.Select.prototype)