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.