Как реализовать такой выбор времени в select?

Question

[z_u_l]

Здравствуйте. Есть в блоке два селекта, первый - часы, второй минуты. Как сделать чтобы при выборе часов\минут время из value увеличивалось на час и записывалось в div снизу в формате (13:30)?

<div class="selectTime">
  <select>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
  </select>
  :
  <select>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
  </select>
</div>

<div>
  Здесь должно быть увеличенное на час время
</div>

Answer 1

[0xD34F]

document.querySelector('.selectTime').addEventListener('change', function() {
  const values = Array.from(this.querySelectorAll('select'), n => n.value);
  values[0] = `${-~values[0] % 24}`;

  document.querySelector('куда там вам надо записать время').innerText = values
    .map(n => n.padStart(2, 0))
    .join(':');
});

Answer 2

[Gene Hagmt]

jQuery:

$('select').change(function() {
 $('#increased').html(1 + Number($('#hours').val()) + " : " +      $('#minutes').val());
});

html:

<div class="selectTime">
	<select id='hours'>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
  </select>
  :
  <select id='minutes'>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
  </select>
</div>

<div id='increased'>
  
</div>