Select List Manipulation

Question

This question is similar to at least one other question, but the resolution didn't help me. I have some code that worked great in jQuery 1.4, but works no longer. I have two buttons that (used to) allow the user to navigate thru a select list. Here's the working version:

http://jsbin.com/weput/1/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<button onclick="setOption(-1)">&#8592;</button>
<button onclick="setOption(1)">&#8594;</button>
<select name="select1" id="select1">
  <option value=""></option>
  <option value="one">one</option>
  <option value="two">two</option>
  <option value="three">three</option>
</select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
</body>
</html>

JS:

function setOption(num) {
  var current = $( "#select1" ).attr( "selectedIndex" )
  var next = current + num;
  $('#select1 option:eq('+next+')').attr('selected', 'selected');
}

What do I need to update to make it work in, say, jQuery 1.11.0?

Thanks in advance!

The linked code seems to work for me in Firefox 28.0/OS X 10.8.5. — Waleed Khan, Apr 22 '14 at 19:59

score 1 · Accepted Answer · edited May 23 '17 at 11:54

DEMO

Use .prop()

function setOption(num) {
  var current = $( "#select1" ).prop( "selectedIndex" );
  var next = current + num;
  $('#select1 option:eq('+next+')').prop('selected', true);
}

Try to avoid using inline JS cause hardly maintainable.
Use rather ID selectors like:

<button id="prevOption">&#8592;</button>
<button id="nextOption">&#8594;</button>

and this is all you need:

LIVE DEMO 2

function setOption() {
  var num = this.id.match('prev') ? -1 : 1;
  var curr = $("#select1").prop("selectedIndex") + num;
  $('#select1 option:eq('+curr+')').prop('selected', true);
}

$('#prevOption, #nextOption').click( setOption );

Or also this code:

LIVE DEMO 3

$('#prevOption, #nextOption').click(function(){
  var n = this.id.match('prev')?-1:1;
  $('#select1').prop("selectedIndex", function(i,v){return v+n;});
});

Some good readings:
.prop() vs .attr()
https://softwareengineering.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting
When should I use Inline vs. External Javascript?

score -1 · Answer 2 · answered Apr 22 '14 at 20:20

-1

<button id="a">&#8592;</button>
<button id="b">&#8594;</button>

<select id="select1">
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>

jquery 1.11.0

$(function() {
    $('#a').click(function(){
  var num = this.id.match('prev')+1;
  var curr = $("#select1").prop("selectedIndex") + num;
  $('#select1 option:eq('+curr+')').prop('selected', true);
    });
   $('#b').click(function(){
  var num = this.id.match('prev')-1;
  var curr = $("#select1").prop("selectedIndex") + num;
  $('#select1 option:eq('+curr+')').prop('selected', true);
    });
});

answered Apr 22 '14 at 20:20

alessandrio

4,282
2
29
40

You really don't need all those repeated lines of code, it's too verbose and not the way we should do programming, for a cleaner solution take a look at my answer ;) also what is supposed this line to do `var num = this.id.match('prev')+1;` ? Also in the next click handler `var num = this.id.match('prev')-1;` ? To me seems like a bad copy-paste of my code actually. In your example `this.id.match('prev')` returns `null` and than you do some strange operations with it, also the *prev - next* are a bit inversed. – Roko C. Buljan Apr 22 '14 at 20:31
5min after as I can see http://stackoverflow.com/posts/23229092/revisions, but nevermind you did not answered my question. Why you use `this.id.match('prev')` ? What is `prev` in your code? I can only see these two buttons ` ` – Roko C. Buljan Apr 22 '14 at 20:44

Select List Manipulation

2 Answers2