<!-- With placeholder and default selected option-->

<div class="row">

  <div class="col-4 select-outline">

    <select class="mdb-select md-form md-outline colorful-select dropdown-primary" 

            id="unit_type" name="unit_type" data-placeholder="Please select"

            onchange="setVal();">

      <option value="1-2">1-2</option>

      <option value="3-4">3-4</option>

      <option value="5-6" selected>5-6</option>

    </select>

    <!-- default should selected "5-6" (as selected),

      placeholder should be "Please select" (should not show),

      js select val should be "5-6" on load -->

    <label>type</label>

  </div>

  <div class="col-2">

    <span id="unit_val"></span>

    <!-- default should show "5-6" on load -->

  </div>

</div>

<!-- Without default selected option-->

<div class="row">

  <div class="col-4 select-outline">

    <select class="mdb-select md-form md-outline colorful-select dropdown-primary" 

            id="unit_type_2" name="unit_type_2" data-placeholder="Please select"

            onchange="setVal();">

      <option value="1-2">1-2</option>

      <option value="3-4">3-4</option>

      <option value="5-6">5-6</option>

    </select>

    <!-- default should selected "" (as no option selected),

      placeholder should be "Please select",

      js select val should be "" on load -->

    <label>type</label>

  </div>

  <div class="col-2">

    <span id="unit_val_2"></span>

    <!-- default should show "" on load -->

  </div>

</div>

<!-- Control (Without placeholder)-->

<div class="row">

  <div class="col-4 select-outline">

    <select class="mdb-select md-form md-outline colorful-select dropdown-primary" 

            id="unit_type_3" name="unit_type_3"

            onchange="setVal();">

      <option value="1-2">1-2</option>

      <option value="3-4">3-4</option>

      <option value="5-6" selected>5-6</option>

    </select>

    <!-- default should selected "5-6" (as selected),

      no placeholder,

      js select val should be "5-6" on load -->

    <label>type</label>

  </div>

  <div class="col-2">

    <span id="unit_val_3"></span>

    <!-- default should show "5-6" on load -->

  </div>

</div>

​

​

// Material Select Initialization

$(document).ready(function() {

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

  setVal();

});

​

function setVal() {

  var unit_type = $('#unit_type').val();

  var unit_type_2 = $('#unit_type_2').val();

  var unit_type_3 = $('#unit_type_3').val();

  $('#unit_val').text(unit_type);

  $('#unit_val_2').text(unit_type_2);

  $('#unit_val_3').text(unit_type_3);

}