How can I simplify this Javascript function?

Question

I'm trying to scale this but I'm a little green when it comes to creating JS functions. I managed to get this far on my own, but alas...

When a span gets a value of whatever (in this case, a city name), I want the select box to automatically match it. And I want to scale this by getting rid of all these else if's.

$(document).ready(function() {
  $('select#field1 option').removeAttr('selected');
  var whereEvent = $('span#field2').html();
  if (whereEvent == 'New York') {
    $('select#field1 option[value=New York]').attr('selected', 'true');
  } else if (whereEvent == 'Los Angeles') {
    $('select#field1 option[value=Los Angeles]').attr('selected', 'true');
  } else if (whereEvent == 'Tokyo') {
    $('select#field1 option[value=Tokyo]').attr('selected', 'true');
  } else if (whereEvent == 'London') {
    $('select#field1 option[value=London]').attr('selected', 'true');
  } else if (whereEvent == 'Sydney') {
    $('select#field1 option[value=Sydney]').attr('selected', 'true');
  } else if (whereEvent == 'Paris') {
    $('select#field1 option[value=Paris]').attr('selected', 'true');
  }
});

Can someone help me out here? I promise I'll be grateful for your help. Thank you.

You should not use attr and removeAttr for this - what you want is .prop('selected', true/false) — Bergi
– Bergi, Commented Nov 9, 2012 at 0:20

Jaime Febres · Accepted Answer · 2009-02-11 14:39:47Z

5

This is an option:

    $(document).ready(function() {
      $('select#field1 option').removeAttr('selected');
      var whereEvent = $('span#field2').html();
      var filter = 'select#field1 option[value=' + whereEvent + ']';
      $(filter).attr('selected', 'true');
   }

Or you could do:

    $(document).ready(function() {
      var filter = $('span#field2').html();
      $('select#field1 option').each(function(){
           this.selected = (this.value == filter);
      });
   }

edited Feb 11, 2009 at 14:39

answered Feb 10, 2009 at 23:44

Jaime Febres

1,2771 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bobince Over a year ago

You also don't need to removeAttr, setting one option selected unselects the previously-selected one.

Ionuț Staicu · Accepted Answer · 2009-02-10 23:42:59Z

3

Maybe:

$('select#field1 option').removeAttr('selected');
var whereEvent = $('span#field2').html();
$('select#field1 option[value='+whereEvent+']').attr('selected', 'true');

?

answered Feb 10, 2009 at 23:42

Ionuț Staicu

22.3k11 gold badges54 silver badges58 bronze badges

1 Comment

oblongsquare Over a year ago

That's where I was confused. 'if' isn't necessary here. Thank you!

Andy Hume · Accepted Answer · 2009-02-10 23:44:11Z

0

I don't know jQuery, so there's probably a more elegant way, but:

var whereEvent = $('span#field2').html();
$('select#field1 option[value=' + whereEvent + ']').attr('selected', 'true');

answered Feb 10, 2009 at 23:44

Andy Hume

42k10 gold badges51 silver badges60 bronze badges

Comments

TrL · Accepted Answer · 2012-11-09 00:17:34Z

This will work at least, and it will seem logical as well.

$(document)
.ready(function () {
$("select#field1 option")
    .removeAttr("selected");
var a = $("span#field2")
    .html();
a == "New York" ? $("select#field1 option[value=New York]")
    .attr("selected", "true") : a == "Los Angeles" ? $("select#field1 option[value=Los Angeles]")
    .attr("selected", "true") : a == "Tokyo" ? $("select#field1 option[value=Tokyo]")
    .attr("selected", "true") : a == "London" ? $("select#field1 option[value=London]")
    .attr("selected", "true") : a == "Sydney" ? $("select#field1 option[value=Sydney]")
    .attr("selected", "true") : a == "Paris" && $("select#field1 option[value=Paris]")
    .attr("selected", "true")
})

Collectives™ on Stack Overflow

How can I simplify this Javascript function?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related