log select element value onchange + center h/v

by Allen N.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.js"></script>
<select id="iceCreamChoice" class="ui dropdown">
  <option value="">Favorite Ice Cream</option>
  <option value="chocolate">Chocolate</option>
  <option value="vanilla">Vanilla</option>
  <option value="strawberry">Strawberry</option>
</select>

CSS

.ui.dropdown.selection {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript

$('#iceCreamChoice').change(function() {
    console.log('Text selected: ' + $(this).find(':selected').text());
    console.log('Value selected: ' + $(this).find(':selected').val());
}).dropdown({
  onHide: function() {
    $(this).children('svg').attr('data-icon', 'plus');
  }
});