VIKASKUMAR SHANSETI VIKASKUMAR SHANSETI - 18 days ago 6
Javascript Question

How to change the dropdown option value from back to beginning and beginning to back using javascript,jquery

Am trying to change the dropdown value based on prev and next buttons But if the option is the last in dropdown am unable to go to first one and if the option is first am unable to go to last one. Can anyone help in this.Here is fiddle code..



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

Try using this solution for loopNext Try to write your code for loopPrev by editing the same!

Use prop to set property instead of attr to change selected value in dropdown.

$.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>