Как я могу упростить эту функцию 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

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

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

Answer 4

Я не знаю jQuery, так что, возможно, есть более элегантный способ, но:

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