Динамическое выпадающее меню JQuery при изменении заполняет другие поля

Question

У меня есть это выпадающее (выбранное) меню, сгенерированное с помощью JQuery, динамически с использованием JSON из сценария PHP.Обратитесь к приложенному изображению под этикеткой компонентов.Меню «Выбор» содержит имя компонента и идентификатор компонента (значение).

Я хочу, чтобы событие "при изменении", используя JQuery, заполнило следующие поля Код, Категория и UOM соответствующими значениями.

Мой объект JSON извлекает все, что необходимо (Мне удалось добиться этого с помощью автозаполнения JQuery).

например.

[{"id":"4","component":"Component 1","code":"COMP1","uom":"kilo","category":"Flour"}...]

Это мой код для генерации меню "select" с опциями внутри, исходя из вышеупомянутого JSON.

$.getJSON("<?php echo site_url('products/dropdown/no'); ?>", function(result) {
            var optionsValues = '<select>';
            optionsValues += '<option value="">' + '--' + '</option>';
            $.each(result, function() {
            optionsValues += '<option value="' + this.id + '">' + this.component + '</option>';
            });
            optionsValues += '</select>';
            var options = $("select[name=component]");
            options.replaceWith(optionsValues);  
        });

Он находится в $ (document) .ready.

Итак, мне нужна функция или что-то, что при каждом изменении в меню «выбор» заполняет упомянутые поля вокругс соответствующими значениями.

Заранее большое спасибо.

Answer 1

$('select').change(function(){
   //Populate other fields
   //$.getJSON()
   //$('input.code').val(response.code)
   //etc...
});

Или, если вы сгенерируете элемент select после загрузки страницы, вы можете использовать:

$('select').live('change', function(){
   //Populate other fields
});

Answer 2

Вот как я это сделал:

Заполнение элемента select и сохранение результатов в переменной JSONObject:

$.getJSON("http://localhost/ci/index.php/products/dropdown/no", function(result) {
    var optionsValues = "<select id='component'>";
    JSONObject = result;
    optionsValues += '<option value="">' + '--' + '</option>';
    $.each(result, function() {
            optionsValues += '<option value="' + this.id + '">' + this.prodname + '</option>';
    });
    optionsValues += '</select>';
    var options = $("select#component");
    options.replaceWith(optionsValues);  
});

Когда пользователь меняет значения в меню выбора:

$("select#component").live('change',function() {
            if(this.selectedIndex == '')
            {
                $("input#code").val('');  
                $("input#category").val('');  
                $("input#uom").val('');  
                return false;   
            }
          $("input#code").val(JSONObject[this.selectedIndex-1].code);  
          $("input#category").val(JSONObject[this.selectedIndex-1].pcname);  
          $("input#uom").val(JSONObject[this.selectedIndex-1].uname);
        });

Answer 3

$("#select").change(function(){


});