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

Question

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>

score 2 · Accepted Answer · edited May 23 '17 at 12:30

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>

but how can I go from the first one to last when previous is clicked. — VIKASKUMAR SHANSETI, Nov 21 '16 at 07:30
You can do it the same way. Write a function for loopPrev just like the loopNext! — sabithpocker, Nov 21 '16 at 07:32
Try the code snippet in answer by clicking `Run Code snippet` both previous and next works for me infinitely! — sabithpocker, Nov 21 '16 at 07:38

Hoang Do · Answer 2 · 2016-11-21T07:47:57.923

Try this. Actually when nextElement.length = 0, you know that it's already the first/last option, so you will only need to select the corresponding last/first option

var total_options = $('#selectBox option').length;

$("#next").click(function() {
  var curr_op = $('#selectBox').val();
  if (++curr_op > total_options) curr_op = 1;
  $('#selectBox').val(curr_op);
});

$("#prev").click(function() {
  var curr_op = $('#selectBox').val();
  if (--curr_op < 1) curr_op = total_options;
  $('#selectBox').val(curr_op);
});

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>

once I perform looping through the dropdown through next it stops working — VIKASKUMAR SHANSETI, Nov 21 '16 at 07:38

score 1 · Answer 3 · answered Nov 21 '16 at 07:51

Try this :

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

    }
  });

  $("#prev").click(function() {
    var nextElement = $('#selectBox > option:selected').prev('option');
    if (nextElement.length > 0) {
      nextElement.prop('selected', 'selected');
    } else {
      var lastIndex = ($("#selectBox > option").length) - 1;

      $('#selectBox > option:eq(' + lastIndex + ')').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>

Satinder singh · Answer 4 · 2016-11-21T07:23:07.903

0

Try this

$("#next").click(function() {
  var getIndex =$("select option:selected").index();
  var index=getIndex+1;
   $("select").children().removeAttr('selected');
   $("select").children().eq(index).attr('selected', 'selected');
});

Working Demo

edited Nov 21 '16 at 07:23

answered Nov 21 '16 at 07:17

Satinder singh

10,100
16
60
102

@VIKASKUMARSHANSETI pls check js fiddle demo – Satinder singh Nov 21 '16 at 07:23

Bhaskara Arani · Answer 5 · 2016-11-21T09:47:00.050

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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>

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

5 Answers5