replace html option value by an image

Dear experts,

I am creating an html survey and I would like to replace an option value by an image. I mean, if the user choose Yes, instead of outputting the string Yes, the survey should show a green dot. On the other hand if the user chose no, it should show a red dot.

Could you please help me with that?

Attached goes a screenshot with the source code for reference.

thanks in advance,

Winter
Captura-de-pantalla-2013-09-30-a.png
glepizaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Green/red dot where?
0
glepizaAuthor Commented:
It should go in the output form. If the user choose yes, the output should show a greed dot. like the attached image.
example.png
0
GaryCommented:
I don't know how one relates to the other - is this on the same page?
You need to post some code so we can see it in context.
0
InsoftserviceCommented:
Please  add three images with name as image1.jpg,image2.jpg,image3.jpg
Or As per your image name change within the select option.
Or you could even write switch case or if condition in js function to provide the image name if you want to keep option value as 'YES' and 'NO'

Please do let me know if any issue


<!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">
<head>
<title>Love to marry an free matimonial website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">

 $(document).ready(function(){
   $("#kitchen_color").change(function(){
     $("img[name=image-swap]").attr("src",$(this).val());

   });

});

 </script>
</head>
<body>
<div class="main">
<img src="" name="image-swap">
<select name="kitchen_color" id="kitchen_color">
<option value="imag1.jpg">None</option>
    <option value="imag2.jpg">Yes</option>
    <option value="imag3.jpg">NO</option></div>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
glepizaAuthor Commented:
Yup, just what I needed. Im going to use the if statement. Thanks again, I just needed an starting up point.

Winter
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.