Как выбрать следующее или предыдущее значение из выпадающего списка после выбранного?

Question

У меня есть выпадающий список, который содержит слайд Time with 30 min для каждого часа, и я хочу выбрать следующий параметр, следующий за выбранным.пример: текущее выбранное время - 7:30 вечера, поэтому, когда я запускаю свой сценарий, если мое текущее время совпадает с текущим выбранным временем, я должен изменить время на следующий слот, то есть 8:00 вечера.так как написать xpth или jquery, чтобы выбрать опцию nnext?

Вот HTML:

<select id="f-cut-off-time" name="f-cut-off-time" aria-invalid="false" class="valid">
    <option value="6:00AM">6:00AM</option>
    <option value="6:30AM">6:30AM</option>
    <option selected="" disabled="" hidden="" value="7:30PM">7:30PM</option>
    <option value="7:30AM">7:30AM</option>
    <option value="8:00AM">8:00AM</option>
    <option value="8:30AM">8:30AM</option>
    <option value="9:00AM">9:00AM</option>
    <option value="9:30AM">9:30AM</option>
    <option value="10:00AM">10:00AM</option>
    <option value="10:30AM">10:30AM</option>
    <option value="11:00AM">11:00AM</option>
    <option value="11:30AM">11:30AM</option>
    <option value="12:00PM">12:00PM</option>
    <option value="12:30PM">12:30PM</option>
    <option value="1:00PM">1:00PM</option>
    <option value="1:30PM">1:30PM</option>
    <option value="2:00PM">2:00PM</option>
    <option value="2:30PM">2:30PM</option>
    <option value="3:00PM">3:00PM</option>
    <option value="3:30PM">3:30PM</option>
    <option value="4:00PM">4:00PM</option>
    <option value="4:30PM">4:30PM</option>
    <option value="5:00PM">5:00PM</option>
    <option value="5:30PM">5:30PM</option>
    <option value="6:00PM">6:00PM</option>
    <option value="6:30PM">6:30PM</option>
    <option value="7:00PM">7:00PM</option>
    <option value="7:30PM">7:30PM</option>
    <option value="8:00PM">8:00PM</option>
    <option value="8:30PM">8:30PM</option>
    <option value="9:00PM">9:00PM</option>
    <option value="9:30PM">9:30PM</option>
    <option value="10:00PM">10:00PM</option>
    <option value="10:30PM">10:30PM</option>
    <option value="11:00PM">11:00PM</option>
    <option value="11:30PM">11:30PM</option>
    <option value="12:00AM">12:00AM</option>
    <option value="12:30AM">12:30AM</option>
    <option value="1:00AM">1:00AM</option>
    <option value="1:30AM">1:30AM</option>
    <option value="2:00AM">2:00AM</option>
    <option value="2:30AM">2:30AM</option>
    <option value="3:00AM">3:00AM</option>
    <option value="3:30AM">3:30AM</option>
    <option value="4:00AM">4:00AM</option>
    <option value="4:30AM">4:30AM</option>
    <option value="5:00AM">5:00AM</option>
    <option value="5:30AM">5:30AM</option>
</select>

Answer 1

Как я понимаю, вам нужно использовать:

$('option:selected').next() or 
$('option:selected').prev()

Answer 2

Вы можете извлечь выбранный индекс элемента select, убедиться, что после него есть другой параметр, и затем найти его по индексу в коллекции параметров этого элемента select.

$('#timeslot').on('input', function () {
  var i = this.selectedIndex;
  if (i + 1 < this.options.length) {
    console.log("next option value is " + this.options[i + 1].value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='timeslot'>
  <option value="6:00AM">6:00AM</option>
  <option value="6:30AM">6:30AM</option>
  <option value="7:00AM">7:00AM</option>
  <option value="7:30AM">7:30AM</option>
</select>

Answer 3

Чтобы выбрать параметр следующий или предыдущий из раскрывающегося списка после или перед параметром selected, можно использовать следующее решение:

• Следующая опция:

  • XPath :

    //select[@class='valid' and @id='f-cut-off-time']//option[@selected]//following::option[1]
    

  • Снимок браузера:

• Предыдущий параметр:

  • XPath :

    //select[@class='valid' and @id='f-cut-off-time']//option[@selected]//preceding::option[1]
    

  • Снимок браузера:

Answer 4

Вы можете просто изменить значение следующим образом.

<option value="6:00PM">5:30PM</option>

Таким образом, это будет выглядеть так, как будто они выбирают 5:30, но выводит 6: 00