Подставить поле ввода, когда текст соответствует выделению

Question

У меня есть несколько раскрывающихся списков, например:

        <select id="filter-race">
            <option>Select Race</option>
            <option>Aqua</option>
            <option>Beast</option>
            <option>Beast-Warrior</option> 
            <option>Creator-God</option>
        </select>

Выбор одного из этих вариантов выбора создает, например, строку URL-запроса &race=Aqua.

Затем при загрузке страницы он проверяет строку запроса и меняет раскрывающийся список:

if(getQueryVariable("race") != undefined){
    if(getQueryVariable("race") == "Aqua"){
        jQuery('#filter-race').prop('selectedIndex',1).trigger("chosen:updated");
    }else if(getQueryVariable("race") == "Beast"){
        jQuery('#filter-race').prop('selectedIndex',2).trigger("chosen:updated");
    }
    else if(getQueryVariable("race") == "Beast-Warrior"){
        jQuery('#filter-race').prop('selectedIndex',3).trigger("chosen:updated");
    }
    else if(getQueryVariable("race") == "Creator-God"){
        jQuery('#filter-race').prop('selectedIndex',4).trigger("chosen:updated");
    }
}

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

Что-то вроде:

if(getQueryVariable("race") != undefined){     
    jQuery('#filter-race').prop('selectedIndex', 'getQueryVariable("race")').trigger("chosen:updated");      
}

Я знаю, что этот код не будет работать, но это мой мыслительный процесс для чегоЯ пытаюсь достичь. Я знаю, что, вероятно, я должен использовать option values для выбора, но мне интересно, возможно ли достичь того, что я спрашиваю, без снижения производительности.

.trigger("chosen:updated"); необходимо, поскольку я использую jQueryИзбранный .

Answer 1

Выяснил более простой способ, чем большая, если еще подходящая цепочка:

//Card Race String Query
if(getQueryVariable("race") != undefined){

    jQuery('#filter-race').val(decodeURI(getQueryVariable("race"))).trigger("chosen:updated");

    if(document.getElementById('filter-race').value == ''){
       jQuery('#filter-race').prop('selectedIndex',0);
    }   

}

В первой строке в раскрывающемся списке выбора указывается любое значение, полученное из &race= строки запроса.

Однако, если это недопустимое значение, раскрывающийся список будет заполнен пустым / пустым значением. Поэтому я установил его так, чтобы в этом случае оно было значением по умолчанию.