JQuery для изменения значения на основе выбора в выпадающем меню

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

До сих пор я выяснил, как настроить значение, которое мне нужно изменить. Я также получил все возможное, чтобы, если кто-то делает какой-либо выбор из меню, он меняет входное значение поиска на одно конкретное значение:

Blue Red Yellow
$(function() { $('select[name="color"]').change(function() { $('input[name="ancestorId"]').val("9999"); }); });

Теперь мне нужно что-то, что устанавливает значение в соответствии с выбором меню, подбирает что-то вроде этого:

 Blue = 9999 Red = 8888 Yellow = 7777 

Я все еще смотрю на примеры и буду стараться, но вроде застрял. Любые советы приветствуются.

Вы должны поместить назначение значения в элементы опции, поскольку они были предназначены именно для этого:

  

И сценарий почти остается прежним, за исключением того, что я использовал идентификаторы элементов вместо их имен в селекторах (предполагая, что у вашего элемента-предка есть такой идентификатор):

 $(function() { $('#color').change(function() { $('#ancestor').val($(this).val()); }).change(); // Trigger the event }); 

Обратите внимание, что .change() вызывает событие изменения, которое было только что назначено, так что значение предварительно выбранного элемента будет заполнено в текстовое поле при загрузке страницы.

Смотрите в действии:

 $(function() { $('#color').change(function() { $('#ancestor').val($(this).val()); }).change(); // Trigger the event });