CODEWITHSUNDEEP
javascriptjqueryhtml
Pv-Viana
Pv-Viana

Reputation: 642

How select the previous option with jQuery?

I have a html page with a select element like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<select id="ExSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
 </select>
  <br>
  <br>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <button onclick="ToTheNext()" id="btnext">Next</button>
</body>
</html>

And I'm using this simple function on the button OnClick to change the selected item to the next option item of the dropdown:

function ToTheNext()
{
    $('#ExSelect option:selected').next().attr('selected', 'selected');
}

My question is: How can i change the selected item to the previous option of this tag using Vanilla JavaScript or jQuery?

Jsbin Example: https://jsbin.com/nuyeduf/edit?html,js,output

Upvotes: 3

Views: 1499

Answers (4)

Dubuc Valentin
Dubuc Valentin

Reputation: 1

In order to complete the answer. If you want to trigger something with the new selected option, you must add .change() at the end of your functions :

function ToTheNext(){
    $('#ExSelectoption:selected').next().prop('selected', true).change();
}

function ToThePrevious(){
    $('#ExSelectoption:selected').prev().prop('selected', true).change();
}

Upvotes: 0

RETZZ
RETZZ

Reputation: 21

Use $('#ExSelect option:selected').prev().prop('selected', true);

Upvotes: 2

Jamiec
Jamiec

Reputation: 136074

Two problems - first by using attr you're setting more than one option to selected, which is probably not what you want to do as it will stop the prev() from working as you expect.

Change your code like this:

function ToTheNext()
{
    $('#ExSelect option:selected').next().prop('selected', true);
}

function ToThePrevious()
{
    $('#ExSelect option:selected').prev().prop('selected', true);
}

https://jsbin.com/xewopobasi/1/edit?html,js,output

If you're using jQuery then stop using onclick attributes and instead assign click handlers appropriately

$('#btnext').on('click', function(){
    $('#ExSelect option:selected').next().prop('selected', true);
});


$(function(){

  $('#btnext').on('click',function(){
    $('#ExSelect option:selected').next().prop('selected', true);
  });

  $('#btprev').on('click',function(){
    $('#ExSelect option:selected').prev().prop('selected', true);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ExSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
 </select>
  <br>
  <br>
  <button id="btnext">Next</button>
  <button id="btprev">Prev</button>

Upvotes: 6

Suren Srapyan
Suren Srapyan

Reputation: 68635

Replace the .attr('selected', 'selected'); with .prop('selected', true);

next() with prev()

and add the jQuery script under the button.

const select = $('#ExSelect');

function next()
{
   select.find('option:selected').next().prop('selected', true);
}

function prev()
{
  select.find('option:selected').prev().prop('selected', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ExSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
<button onclick="next()" id="btnext">Next</button>
<button onclick="prev()" id="btprev">Prev</button>

Upvotes: 3

Related Questions