Two drop downs with image

[myth3_16]

Hi All,

I am trying to get this working.

I have two drop down menus, you select one and the other is populated according to the selection from the first one.

Now what I want to do is when selecting an item from the second drop down i would like an image to appear based on the selection from the drop down.

is this at all possible?

this is what I have so far:

This page displays everything.

<br><br>

<?     
     echo "<form name=sel>\n";
     echo "Choose Gift Type : <font id=gift><select>\n";
     echo "<option value='0'>============</option> \n" ;
     echo "</select></font>\n";
     
     echo "Choose Your Gift : <font id=gifttype><select>\n";
     echo "<option value='0'>=== none ===</option> \n" ;
     echo "</select></font>\n";
?>

<script language=Javascript>
function Inint_AJAX() {
   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;
};

function dochange(src, val) {
     var req = Inint_AJAX();
     req.onreadystatechange = function () { 
          if (req.readyState==4) {
               if (req.status==200) {
                    document.getElementById(src).innerHTML=req.responseText; //retuen value
               } 
          }
     };
     req.open("GET", "state.php?data="+src+"&val="+val); //make connection
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
     req.send(null); //send value
}

window.onLoad=dochange('gift', -1);         // value in first dropdown
</script>

This is the page that loads both drop downs.

<?
     //set IE read from page only not read from cache
     header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
     header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
     header ("Cache-Control: no-cache, must-revalidate");
     header ("Pragma: no-cache");
     
     header("content-type: application/x-javascript; charset=tis-620");
     
     $data=$_GET['data'];
     $val=$_GET['val'];
     
     //set database
$dbhost = "*********";
$dbuser = "****";
$dbpass = "****";
$dbname    = "****";
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");  
     
     if ($data=='gift') {  // first dropdown
          echo "<select name='gift' onChange=\"dochange('gifttype', this.value)\">\n";
          echo "<option value='0'>==== choose gift type ====</option>\n";
          $result=mysql_db_query($dbname,"select `gift_id`, `gift_type` from gifttest order by `gift_type`");
          while(list($id, $name)=mysql_fetch_array($result)){
               echo "<option value=\"$id\" >$name</option> \n" ;
          }
     } else if ($data=='gifttype') { // second dropdown
          echo "<select name='gifttype'>\n";
          echo "<option value='0'>====choose your gift ====</option>\n";                           
          $result=mysql_db_query($dbname,"SELECT `gift_id`, `desc` FROM giftdesc WHERE `gift_id` = '$val' ORDER BY `desc` ");
          while(list($id, $name)=mysql_fetch_array($result)){       
               echo "<option value=\"$id\" >$name</option> \n" ;
          }
     } 
     echo "</select>\n<br><br>"; 
?>

Can anbody help me with this???

if you want to see what I got you can see it here: www.personally-yours.co.uk/development/state_dropdown.php

Regards,

Brett Rogers

[Luckychap]

for second select option write a event-handler for onchange event.

like :

<select onchange='showImage(this)'>
.
.
.
</select>
<div id='img-div'></div>

js code:

function showImage(selEl) {
var totalOption = selEl.options.length;

for(var i = 0; i<totalOption; i++) {
  var imgDiv = document.getElementById('im-div');  
  if(selEl.options[i].selected=='selected') {
      imgDiv.innerHTML = "<img src='" 
+ imgArr[i].src + "'/>";      
  }
}

Not tested, hope to work.

[myth3_16]

thanks for that, how does it know where the images are?

in the database the url for the pic is stored in a field called imgurl.

would it be possible if this can be incorporated to actaully show the correct pic. I am going to try your code now.

[Luckychap]

You have to specify the path of the image. You have 2 options: 1. fetch the paths from database or 2. manually write the path for all the images.

[myth3_16]

how do i do this, i am a relative newbie to this area

[Luckychap]

Fetching paths from database would little lengthy, so its better to set the path manually:

var imgArr = new Array();
//width, height are the width and height of the image
imgArr[0] = new Image(width , height);
imgArr[0].src = "path/of/your/image1";

imgArr[1] = new Image(width, height);
imgArr[1].src = "path/of/your/image2";
.
.
.
.

You will declare an Array to hold the images
and then set the src attribute of image variable.