We Keep Coding

How do I set an image to display from a dropdown menu option?

I'm trying to make a form that displays a movie poster when you select which movie you'd like to see. I wrote a function but I'm new to javascript and something isn't working correctly.
Thanks for any help provided.
JS
function setMovie() {
var img = document.getElementById("movimg");
var value = img.options[img.selectedIndex].value;
var selected = document.getElementById("selectedMovie");
selected.src = this.value;
return false;
}
document.getElementById("movieList").onChange = setMovie();
HTML
<select id="movimg" onChange="setMovie(this)">
<option value="null.png">Select a movie!</option>
<option value="bvs.jpg">Batman vs. Superman</option>
<option value="tjb.jpg">The Jungle Book</option>
<option value="tgf.jpg">The Godfather</option>
<option value="tpb.jpg">The Princess Bride</option>
<br>
</select>
<img src="" id="selectedMovie" />

You were referencing movieList, an id that wasn't there. You also did not need to return false in your function.
var select_box = document.getElementById("movimg"),
image_box = document.getElementById("selectedMovie");
function setMovie() {
var value = select_box.options[select_box.selectedIndex].value;
image_box.src = this.value;
}
select_box.addEventListener("change", setMovie);
<select id="movimg">
<option value="null.png">Select a movie!</option>
<option value="bvs.jpg">Batman vs. Superman</option>
<option value="tjb.jpg">The Jungle Book</option>
<option value="tgf.jpg">The Godfather</option>
<option value="tpb.jpg">The Princess Bride</option>
</select>
<img src="" id="selectedMovie"/>

You can just change your function to this:
function setMovie(){
document.getElementById("selectedMovie").src = document.getElementById("movimg").value;
}

Displaying image based on multiple selection value(s)

I have a multiple selection box that I would like to use the value's from to display images based on selecting these values, eg. if one value is selected then one image would be displayed, if two are selected two would be displayed etc. I would also like a limit on it of three images displayed at once, no matter how many selections.
<select multiple name="item" class="details" action="post" id="mySelect">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
Any help would be greatly appreciated, thank you!
What I've tried so far:
<script type="text/javascript">
<!--
function showimage() {
var htmlStr="";
var option = document.getElementById("selectedValue");
for (i=0;i<option.options.length;i++) {
if (option.options[i].selected) {
htmlStr+='<img src="/products/";
htmlStr+=option.options[i].value;
htmlStr+='" /><br />';
}
}
document.getElementById('mySelect').innerHTML = htmlStr;
}
//-->
</script>
The images are located in /products/..

Don't forget to put correct image paths.
function imageFunc(imageid){
var Imageplace=document.getElementById("myImage");
Imageplace.src=imageid;
}
<select multiple name="item" class="details" id="mySelect" onchange="imageFunc(this.value)";>
<option value="1.jpg">One</option>
<option value="2.jpg">Two</option>
<option value="3.jpg">Three</option>
<option value="4.jpg">Four</option>
</select>
<img id="myImage" src="1.jpg"/>

Change your html to this:
<select multiple name="item" class="details" action="post" id="mySelect" onchange="showimage(this.value)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
And your JavaScript to this:
function showimage(option) {
var htmlStr="";
if(option > 3) {
option = 3;
}
for(i=0;i<option;i++) {
htmlStr+='<img src="/products/' + i + '.jpg" /><br />';
}
document.getElementById('images').innerHTML = htmlStr;
}
All your images should be in the products folder with names: 1.jpg, 2.jpg, ...

How to get the value of the childnodes using getElementsById

evening... I want to know which node or value is selected from the drop down menu ( select tag) when I click apply... i dont seem to refer to them correctly.. please help!
<script type="text/javascript">
function apply(){
var xy = document.getElementById("hmm").childNodes;
var ab = xy.value;
alert(ab);
}
</script>
</head>
<body>
<div id="unique">
<select id="hmm" name="drop">
<option value="" id="text area">Text Area</option>
<option value="" id="paragraph">Paragraph</option>
<option value="" id="radio">Radio Button</option>
<option value="" id="delete">Delete</option>
</select>
<button id="apply" onclick="apply()">Apply</button>
</div>
</html>

function apply() {
var selectBox = document.getElementById("hmm");
var selectedOption = selectBox.options[selectBox.options.selectedIndex];
alert(selectedOption.value);
}
Working Fiddle

Javascript show PNG image

I found this script online. ITs almost what I need. Take a look:
<script type="text/javascript">
imageArray = new Array("NOimglink", "imglink", "imglink", "imglink");
altArray = new Array("", "Red Star", "Yellow Star", "Pink Star");
function show() {
var Index = document.menuForm.select1.options[document.menuForm.select1.selectedIndex].value;
var text = document.getElementById('select1').options[document.getElementById('select1').selectedIndex].text;
document.testStar.src = imageArray[Index];
document.testStar.alt = altArray[Index];
document.getElementById("item").innerHTML = document.getElementById("select1").value;
}
</script>
<div id="item"></div>
<form action="../action/return.html" method="post" id="menuForm" name="menuForm">
<select id="select1" onchange="show()" name="select1">
<option value="0" selected="selected">Choose a color</option>
<option value="1">Red Star</option>
<option value="2">Yellow Star</option>
<option value="3">Pink Star</option>
</select>
<img id="testStar" height="35" alt="red star" src="" width="35" border="0" name="testStar">
Anyways, is there any other way than using all the array lines? The imageArray and altArray? I have over 50 select options but the array is too much. Any easier way?

1.) Don't use innerHTML, it's a proprietary Microsoft JScript method. No, because some low-brow decided to grandfather it in to a standard does not mean anyone should use it. XHTML and even regular HTML is not text, it's syntax. So when you later reference an element it may or may not be there because you may be referencing the DOM or you may be referencing nothing because what you thought was code was dumped as a bunch of text.
2.) Revised after you clarified your question.
Save as example.xhtml and make sure that you are using images with those variable names or you change the variable names in the code to the names of the images you are testing with.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Dynamic JavaScript Image Generation</title>
<script type="application/javascript">
//<![CDATA[
function change_image()
{
var se = document.getElementById('select_image');
var img_src = se.options[se.selectedIndex].value;
var img_alt = se.options[se.selectedIndex].text;
var img = document.getElementById('img_target');
img.alt=img_alt;
img.src=img_alt+'.png';
}
//]]>
</script>
</head>
<body>
<form action="" method="get">
<fieldset>
<label for="select_image">Select an Image</label>
<select id="select_image" onchange="change_image();">
<option value="img0">Image 0</option>
<option value="img1">Image 1</option>
<option value="img2">Image 2</option>
<option value="img3">Image 3</option>
<option value="img4">Image 4</option>
<option value="img5">Image 5</option>
</select>
</fieldset>
</form>
<div><img alt="" id="img_target" src="img0.png" /></div>
</body>
</html>

If you want to avoid all arrays, you need to modify your HTML a bit. The array serves as a key-val lookup and without that you need to set the val in the previous val spot. That is to say, make your option values equal to the image src as so:
<option value="" selected="selected">Choose a color</option>
<option value="imgLink.png">Red Star</option>
<option value="imgLink2.png">Yellow Star</option>
<option value="img3.jpg">Pink Star</option>
Now it's a simple matter of setting the option value to the new src, and using the option text as the alt text.
function show() {
var elemSel = document.getElementById('select1'),
testStar = document.getElementById("testStar"),
newSrc = elemSel.options[ elemSel.selectedIndex ].value,
newAlt = elemSel.options[ elemSel.selectedIndex ].text;
testStar.src = newSrc;
testStar.alt = newAlt;
document.getElementById("item").innerHTML = "Src: "+newSrc+" |Alt: "+newAlt;
}
http://jsfiddle.net/daCrosby/JkhxP/1/
Edit
If you don't want the file extension in the value, just remove it:
<option value="" selected="selected">Choose a color</option>
<option value="imgLink">Red Star</option>
<option value="imgLink2">Yellow Star</option>
<option value="img3">Pink Star</option>
And if you want the full link for the new src, just add it:
var elemSel = document.getElementById('select1'),
newSrc = elemSel.options[ elemSel.selectedIndex ].value;
newSrc = "example.com/img/" + newSrc + ".png";
http://jsfiddle.net/daCrosby/JkhxP/2/

Get value from select tag on javascript

I want to change the <img src> with value from my <select>.
I have the next HTML code:
<img id="fotosel" /><br/>
<select id="cmbfotos" onchange="aplicarFoto()">
<option value="gokussj3.jpg">Goku SSJ3</option>
<option value="gokussj4.jpg">Goku SSJ4</option>
<option value="gohanssj2.jpg">Gohan SSJ2</option>
<option value="gotenks.jpg">Super Gotenks</option>
<option value="krilin.jpg">Krilin</option>
</select>
and Javascript code:
var fotosel = document.getElementById("fotosel");
var cmb = document.getElementById("cmbfotos");
function aplicarFoto(){
fotosel.src = "fotos/"+cmb.options[cmb.selectedIndex].value;
}
But that doesnt work. I made a test putting an alert() with cmb.options[cmb.selectedIndex].value and nothing appears.
Some guess? Thank you!

Change your aplicarFoto() function to:
function aplicarFoto(_src) {
fotosel.src = 'fotos/' + _src;
}
and in your HTML:
<select id="cmbfotos" onchange="aplicarFoto(this.value)">
...
</select>

Try this
<img id="fotosel" /><br/>
<select id="cmbfotos" onchange="aplicarFoto(this.value)">
<option value="gokussj3.jpg">Goku SSJ3</option>
<option value="gokussj4.jpg">Goku SSJ4</option>
<option value="gohanssj2.jpg">Gohan SSJ2</option>
<option value="gotenks.jpg">Super Gotenks</option>
<option value="krilin.jpg">Krilin</option>
</select>
Javascipt :
var fotosel = document.getElementById("fotosel");
function aplicarFoto(elmImage){
fotosel.src = "fotos/"+elmImage;
}