2016-05-20 2 views
1

У меня есть выпадающее меню, которое я хочу предварительно заполнить значениями из отдельного скрытого поля ввода.jQuery select option code efficiency

Пример: человек приходит в форму с заданным скрытым входным значением - если это значение соответствует значению в раскрывающемся списке, эта опция выбрана.

Код ниже отлично работает, но мне любопытно, можно ли сделать его короче/более эффективным? Как с переменными? Значит, мне не нужно повторять для каждого варианта? Это пригодится в случае большого раскрывающегося списка, как для государств, у которых есть 50 вариантов со значениями. Я все еще учусь ... спасибо! Надеюсь, мой вопрос ясен.

$(document).ready(function() { 
    "use strict"; 
    if ($("input[name='Job Title']").val() === "Job 1") { 
     $("#job_title option[value='Job 1']").prop("selected", true); 
    } 
    else if ($("input[name='Job Title']").val() === "Job 2") { 
     $("#job_title option[value='Job 2']").prop("selected", true); 
    } 
    else if ($("input[name='Job Title']").val() === "Job 3") { 
     $("#job_title option[value='Job 3']").prop("selected", true); 
    } 
    else if ($("input[name='Job Title']").val() === "Job 4") { 
     $("#job_title option[value='Job 4']").prop("selected", true); 
    } 
}); 

CODEPEN: codepen

UPDATE: Когда я впервые задал вопрос, «более эффективным» было в отношении длины кода - уравновешивать вниз, что я должен был получить тот же результат. «Более эффективный» в отношении времени запуска кода (пользовательский опыт) мне не приходило в голову. Хотя мое использование этого кода для очень простой, 4 раскрывающейся формы, где время не рассматривается ... в более широком масштабе, например, если эта форма должна вырасти до десятков или сотен выпадающих меню, время/пользовательский опыт должно быть главной целью, на мой взгляд, должно стать. Вот почему я выбрал ответ ниже.

ответ

2
$("#job_title option[value='" + $("input[name='Job Title']").val() + "']") 
.prop("selected", true); 
+0

Святое дерьмо - это было быстро. Я понимаю, что вы сделали. Благодаря! – chris

2

Просто установите значение select. Это автоматически выбирает параметр с этим значением.

$("#job_title").val($("input[name='Job Title']").val()); 
+1

Это гораздо более эффективный метод, чем выбранный ответ. –

+0

@RoryMcCrossan См. Http://plnkr.co/edit/F8AKWzmt8XCHOqdedSF6?p=preview 'option: 2.492ms',' select: 3.331ms' – guest271314

+1

@ guest271314 Разница меньше, чем миллисекунда, это незначительно. – Barmar