how can i show specific data based on currently selected option in a dropdown list?

Question

little background: currently putting together a website that is selling products, many of which come in various sizes, with respectively different prices. I have the database set up to handle all of this, and I know well enough how to write the PHP code to query said database to get any product in a specific size (with all it's related info). When the user loads up any given product's page, it will show the product with default information.

However, my issue is thus - how can I go about dynamically changing the size-specific info on the product's page, based on the user selecting a different (ie. not the default) size in a dropdown list?

I've tried looking this up via Google, as well as on here, but all I seem to be able to find is people asking the same question over and over as to how to populate a dropdown list dynamically, which isn't my issue D: perhaps my search-fu is weak...

p.s. I realize i could probably just load ALL of the information, in separate hidden Divs, and use javascript to bind an onChange event of some sort to the Select option, to show a specific Div. I'm just curious if there's a way to do this more dynamically, so I'm not loading ALL the data from the database up front. Hope this clarifies my issue.

Answer 1

you want the onchange event of the dropdown.

jquery example:

$('#your-dropdown').live('onchange', function(){
    // fetch different information based on whatever they selected and change it
});

vanilla javascript example:

document.getElementById('your-dropdown').onchange = function(){
     // fetch different information based on whatever they selected and change it
}

EDIT

It seems you're looking for some ajax? try jquery's $.get or $.post