Results 1 to 3 of 3

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

  1. #1
    Join Date
    Mar 2005
    Location
    Western Australia
    Posts
    134
    Thanks
    19
    Thanked 4 Times in 4 Posts

    Default Joining result of multiple selects to get final result?

    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
    Last edited by gwmbox; 01-04-2011 at 01:19 PM.
    1st rule of web development - use Firefox and Firebug
    2nd rule - see the first rule
    --
    I like Smilies

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    gwmbox (01-04-2011)

  4. #3
    Join Date
    Mar 2005
    Location
    Western Australia
    Posts
    134
    Thanks
    19
    Thanked 4 Times in 4 Posts

    Default

    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
    Last edited by gwmbox; 01-04-2011 at 01:21 PM. Reason: Little added Question :)
    1st rule of web development - use Firefox and Firebug
    2nd rule - see the first rule
    --
    I like Smilies

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •