<div class="container">
  <select>
    <option value="0">杉下 右京</option>
    <option value="1">亀山 薫</option>
    <option value="2">神戸 尊</option>
    <option value="3">甲斐 享</option>
    <option value="4">冠城 亘</option>
  </select>

  <div class="result"></div>
</div>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  flex-direction: column;
}

.result {
  height: 1rem;
  padding: 1rem;
  text-content: center;
}
let result = document.querySelector('.result');
let select = document.querySelector('select');

// load
document.addEventListener('DOMContentLoaded', function() {
  let options = select.options;
  result.textContent = options[options.selectedIndex].text;
});

// main
select.addEventListener('change', function() {
  let options = this.options;
  result.textContent = options[options.selectedIndex].text;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.