Question

I have this dropdown (select) menu generated with JQuery, dynamically using JSON coming from PHP script.
Refer on the picture attached, under the Components label. The “select” menu holds Component name and Component ID (value).

I want “on change” event, using JQuery, to populate the following fields Code, Category and UOM, with corresponding values.

My JSON object retrieves everything what is needed (I managed to achieve this with JQuery autocomplete).

eg.

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

This is my code for generating the “select” menu with options inside coming from the above mentioned 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);  
        });

It is located in the $(document).ready.

So, I need function or something which whenever change in the “select” menu occurs, it will populate the mentioned fields around with corresponding values.

Thank you very much in advance.

Answer 1

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

Or if you generate the select element after the page has loaded, you can use:

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