[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 977
  • Last Modified:

JQuery dynamic dropdown menu on change populates other fields

Hello Experts,

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).

bom
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.
eg.
[{"id":"4","component":"Component 1","code":"COMP1","uom":"kilo","category":"Flour"}...]

Open in new window



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.prodname + '</option>';
            });
            optionsValues += '</select>';
            var options = $("select[name=component]");
            options.replaceWith(optionsValues);  
        });

Open in new window

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.
0
psybaron
Asked:
psybaron
  • 6
  • 5
1 Solution
 
Michel PlungjanIT ExpertCommented:
That is a very cumbersome way of populating a select.

I do not see prodname anywhere by the way

Anyway try the following:


$.getJSON("<?php echo site_url('products/dropdown/no'); ?>", function(result) {
  var sel = $("select[name=component]");
  sel.options.length = 1; // leave the --
  $.each(result, function() {
    sel.options[sel.options.length]= new Option(this.id,this.prodname)
  });
});

then have

<select name="component">
<option value="">--</option>
</select>

and have in dom ready
$("select[name=component]").change(function() {
  $("input[name=Code]").val(yourJsonObject[$(this).selectedIndex].code;  
  $("input[name=Category]").val(yourJsonObject[$(this).selectedIndex].category;  
  $("input[name=UOM]").val(yourJsonObject[$(this).selectedIndex].uom;  
});


0
 
psybaronAuthor Commented:
I changed the JSON key:value pair to more descriptive names, not to confuse you. I use "prodname" instead of component.

Thank you very much for your time in looking at my question.
I'm gonna try and let you know how it works!
0
 
psybaronAuthor Commented:
What does yourJsonObject means? Do I have to modify that somehow? I tried to populate the select menu with your code above, but did not work. :S
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Michel PlungjanIT ExpertCommented:
try this

var JSONObject = null;
$.getJSON("<?php echo site_url('products/dropdown/no'); ?>", function(result) {
  JSONObject = result;
  var sel = $("select[name=component]");
  sel.options.length = 1; // leave the --
  $.each(result, function() {
    sel.options[sel.options.length]= new Option(this.id,this.prodname)
  });
});

$("select[name=component]").change(function() {
  $("input[name=Code]").val(JSONObject[$(this).selectedIndex].code;  
  $("input[name=Category]").val(JSONObject[$(this).selectedIndex].category;  
  $("input[name=UOM]").val(JSONObject[$(this).selectedIndex].uom;  
});


0
 
psybaronAuthor Commented:
Still. Doesn't even populate the "select" element.
0
 
Michel PlungjanIT ExpertCommented:
Hmm the spirit of the change is there. I would need to see what for example firefox puts on the console
 
0
 
psybaronAuthor Commented:
Hmmm. I tried it in Firefox with firebug on. Did not report any error, neither anything happed on "change" event. Looks like the change event does not work.

Should we try to use .live('change', function() ...

I populated the "select" element with my .getJSON code, and then used your
function but instead on changed, used .live('change'...).
Now, obviously the change works, but error reports:
JSONObject[$(this).selectedIndex] is undefined

Although, I assigned
JSONObject = result
as in your code.

Sorry, I'm not really experienced in javascript or jquery, and might be making some trivial mistake.
0
 
psybaronAuthor Commented:
I made it!!!

In your code, you wrote:
$(this) .....

then, I changed it to:

this.

And it works!

Thank you very much!

p.s.
Where should I keep the getJSON  code? Outside or inside of the document.ready?

Thanks again!
0
 
Michel PlungjanIT ExpertCommented:
No, because then the select does not exist yet. Very strange about the "this" which likely is my lack of investigation into what jquery change the attribute names to
0
 
Michel PlungjanIT ExpertCommented:
I think we needed to use
$(this).attr("selectedIndex") instead of $(this).selectedIndex

I am investigating why it did work with this as well
0
 
Michel PlungjanIT ExpertCommented:
Okey -  so I learned something too

this.selectedIndex is correct and the way to do it
Alternative but perverse would be $(this)[0].selectedIndex
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now