javascript - 如何使用javascript，jquery将下拉选项值从后到开始和从开始更改为后

Question

我试图根据上一个和下一个按钮更改下拉列表值，但如果选项是下拉列表中的最后一个，我无法转到第一个选项，如果选项是第一个，我无法转到最后一个选项。任何人都可以帮忙。这是 fiddle 代码..

$("#next").click(function() {
  var nextElement = $('#selectBox > option:selected').next('option');
  if (nextElement.length > 0) {
    $('#selectBox > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
  }
});

$("#prev").click(function() {
  var nextElement = $('#selectBox > option:selected').prev('option');
  if (nextElement.length > 0) {
    $('#selectBox > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
  }
});

function currentSlide(selectionValue) {
  console.log(selectionValue);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="prev">Previous</button>
<select id="selectBox" onchange="currentSlide(value);" class="selectpicker">
  <option value="1" class="options">Electronics</option>
  <option value="2" class="options">Clothing</option>
  <option value="3" class="options">Health</option>
  <option value="4" class="options">Food</option>
  <option value="5" class="options">Travel</option>
  <option value="6" class="options">Mobiles</option>
  <option value="7" class="options">Grocery</option>
  <option value="8" class="options">Recharge</option>
  <option value="9" class="options">Furniture</option>
</select>
<button type="button" id="next">Next</button>

Answer 1

尝试使用this solution for loopNext尝试通过编辑相同内容来编写loopPrev代码!

使用prop to set property instead of attr更改下拉列表中的选定值。

$.fn.loopNext = function(selector) {
  var selector = selector || '';
  return this.next(selector).length ? this.next(selector) : this.siblings(selector).addBack(selector).first();
}
$.fn.loopPrev = function(selector) {
  var selector = selector || '';
  return this.prev(selector).length ? this.prev(selector) : this.siblings(selector).addBack(selector).last();
}
$("#next").click(function() {
  $('#selectBox > option:selected')
    .removeAttr('selected')
    .loopNext('option')
        .prop('selected', 'selected');
});

$("#prev").click(function() {
  $('#selectBox > option:selected')
    .removeAttr('selected')
    .loopPrev('option')
        .prop('selected', 'selected');
});

function currentSlide(selectionValue) {
  console.log(selectionValue);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="prev">Previous</button>
<select id="selectBox" onchange="currentSlide(value);" class="selectpicker">
  <option value="1" class="options">Electronics</option>
  <option value="2" class="options">Clothing</option>
  <option value="3" class="options">Health</option>
  <option value="4" class="options">Food</option>
  <option value="5" class="options">Travel</option>
  <option value="6" class="options">Mobiles</option>
  <option value="7" class="options">Grocery</option>
  <option value="8" class="options">Recharge</option>
  <option value="9" class="options">Furniture</option>
</select>
<button type="button" id="next">Next</button>