Dynamically populate form field, based on two other fields

Say we have a form field and want to populate it with a images based on two other fields. Say these are called COLOUR and STYLE. So if style is 'A' and colour is black, we want to display the unique image representing these choices. If style is 'B' and colour black, another image.

So what is missing from the following?:

add_filter("pre_render", "populate_dropdown");

function populate_dropdown($form){

    if($form["id"] != 1)
        return $form;

    foreach($form["fields"] as &$field)
        if($field["id"] == 1){
       开发者_JAVA技巧     $field["content"] = "DYNAMIC STUFF HERE";
        }

    return $form;
}

To build on geoffs3310's answer above, you could easily combine that with ajax to do some more complex logic, or even build your custom content from a database.

style = $('#style').val();
color = $('#color').val();

$.ajax({
     type: "POST",
     url: "get_image.php"
     data: { "style" : style, "color" : color },
     success: function(msg) {
          $("#image_field").html('<img src="' + msg + '" />');
     }
});

And in get_image.php:

$color = $_POST['color'];
$style = $_POST['style'];
var $image;

// Logic goes here, setting $image to the appropriate image link

echo $image;

why dont you either on page load or using an event handler just get the value of the form inputs and then do what you want based on what they are e.g

$(document).ready(function() {
   style = $('#style').val();
   color = $('#color').val();

   if(style=='A' && color=='black') {
      // do something
   }

   if(style=='B' && color=='black') {
      // do something
   }
});