如何从选定的一个之后的下拉列表中选择下一个或之前的值？

Question

我有一个下拉菜单，其中包含每小时滑动30分钟的时间，我想选择下一个选项以使所选的菜单无效。例如：当前选择的时间是7:30 PM，所以当我运行我的方案时，如果我的当前时间等于当前选择的时间，则应该将时间更改为下一个广告位，即8:00 PM。那么如何编写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 value="6:00PM">5:30PM</option>

那样，它将显示为好像他们选择的是5:30，但输出的是6:00

Answer 2

您可以检索select元素的选定索引，确保后面有另一个选项，然后在该select元素的options集合中按索引找到它。

$('#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

要在\r选项之后或之前的下拉菜单中选择 next 或 previous 选项，可以使用以下解决方案：

• 下一步选项：

  • XPath ：

    selected

  • 浏览器快照：

• 上一个选项：

  • XPath ：

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

  • 浏览器快照：

Answer 4

据我了解，您需要使用：

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