Как я могу упростить эту функцию Javascript?

Question

Я пытаюсь масштабировать это, но я немного зеленый, когда дело доходит до создания функций JS. Мне удалось это сделать самостоятельно, но, увы ...

Когда диапазон получает значение любого (в данном случае, название города), я хочу, чтобы поле выбора автоматически соответствовало ему. И я хочу масштабировать это, избавляясь от всех остальных, если есть.

$(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'); 
    } 
}); 

Может кто-нибудь помочь мне здесь? Я обещаю, что буду благодарен за вашу помощь. Спасибо.

Answer 1

Это вариант:

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

Или вы могли бы сделать:

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

Answer 2

Может быть:

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

?

Answer 3

Я не знаю, JQuery, так что, вероятно, более изящный способ, но:

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

Answer 4

Это будет работать как минимум, и это будет казаться логичным.

$(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") 
})