<div class="container-fluid">

   <div class="row">

      <div class="col-6">

         <select id="mySelect" class="mdb-select md-form">

            <option value="" disabled selected>Choose your number</option>

            <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>

      </div>

      <div class="col">

         <button id="first-button" type="button" class="btn btn-primary">Click me first (add +5)</button>

         <button id="second-button" type="button" class="btn btn-primary">Click me second (add + 5)</button>

      </div>

   </div>

</div>

​

$(document).ready(function() {

   $('.mdb-select').materialSelect();

});

​

$('#first-button').click(function () {

   var optionList = '';

   optionList = optionList + '<option value="6">Six</option>';

   optionList = optionList + '<option value="7">Seven</option>';

   optionList = optionList + '<option value="8">Eight</option>';

   optionList = optionList + '<option value="9">Nine</option>';

   optionList = optionList + '<option value="10">Ten</option>';

   $('#mySelect').append(optionList);

   $('.mdb-select').materialSelect({ destroy: true });

   $('.mdb-select').materialSelect();

});

​

$('#second-button').click(function () {

   var optionList = '';

   optionList = optionList + '<option value="11">Eleven</option>';

   optionList = optionList + '<option value="12">Twelve</option>';

   optionList = optionList + '<option value="13">Thirteen</option>';

   optionList = optionList + '<option value="14">Fourteen</option>';

   optionList = optionList + '<option value="15">Fifthteen</option>';

   $('#mySelect').append(optionList);

   $('.mdb-select').materialSelect({ destroy: true });

   $('.mdb-select').materialSelect();

});

​