Joining result of multiple selects to get final result?

**gwmbox** · 01-04-2011, 03:29 AM

Hi guys, I have a form that has three select options, e.g.

HTML Code:

<h3>Number</h3>
<select id="options_number" name="option1" onchange="result();">
  <option value='one' selected='selected'>One</option>
  <option value='two' >Two</option>
  <option value='three' >Three</option>
  <option value='four' >Four</option>
  <option value='five' >Five</option>
</select>
<h3>Condition</h3>
<select id="options_condition" name="option2" onchange="result();">
  <option value='blind' >Blind</option>
  <option value='dead' >Dead</option>
  <option value='Healthy' selected='selected'>Healthy</option>
</select>
<h3>Animal</h3>
<select id="options_animal" name="option3" onchange="result();">
  <option value='mice' selected='selected'>Mice</option>
  <option value='rats' >Rats</option>
</select>

Each select is to provide a result individually, but I need to combine the results to get a final result, the end result will show a picture

I am thinking something like this but I am not really sure how to get the correct values and/or if my combining method is correct or not.

Code:

if (option1 == one && option2 == healthy && option3 == rats) {
document.getElementById('mypic').innerHTML = 'http://mine.com/3healthyrats.jpg';
} elseif (option1 == three && option2 == blind && option3 == mice) {
document.getElementById('mypic').innerHTML = 'http://mine.com/3blindmice.jpg';
} elseif .........

Thanks

GW

**vwphillips** · 01-04-2011, 09:50 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function result(){
 var src='One.gif';
 var string=document.getElementById('options_number').value+document.getElementById('options_condition').value+document.getElementById('options_animal').value;
 if (string=='oneHealthymice'){
  src='One.gif';
 }
 else if (string=='twoHealthymice'){
  src='Two.gif';
 }
 else if (string=='threeHealthymice'){
  src='Three.gif';
 }
 else if (string=='fourHealthymice'){
  src='Four.gif';
 }
 else if (string=='fiveeHealthymice'){
  src='Five.gif';
 }
// continue ele ifs for all required options;
 document.getElementById('img').src='http://www.vicsjavascripts.org.uk/StdImages/'+src;
}

/*]]>*/
</script></head>

<body>
<h3>Number</h3>
<select id="options_number" name="option1" onchange="result();">
  <option value='one' selected='selected'>One</option>
  <option value='two' >Two</option>
  <option value='three' >Three</option>
  <option value='four' >Four</option>
  <option value='five' >Five</option>
</select>
<h3>Condition</h3>
<select id="options_condition" name="option2" onchange="result();">
  <option value='blind' >Blind</option>
  <option value='dead' >Dead</option>
  <option value='Healthy' selected='selected'>Healthy</option>
</select>
<h3>Animal</h3>
<select id="options_animal" name="option3" onchange="result();">
  <option value='mice' selected='selected'>Mice</option>
  <option value='rats' >Rats</option>
</select>
<img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="100" height="100" />

</body>

</html>

**gwmbox** · 01-04-2011, 01:18 PM

Thanks Vic, what is even better is the simplicity of it to enable me to expand on it as needed, again thanks very much for your help.

Can you explain what the /*<![CDATA[*/ is for?

GW

Thread: Joining result of multiple selects to get final result?

Thread Tools

Search Thread

Joining result of multiple selects to get final result?

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions