We Keep Coding

Selecting a dropdown choice and having different images appear (using Javascript)

I am trying to have different images come up after selecting an option from a dropdown. I know it's probably very basic, but I am very new to HTML and Javascript. Not sure where or why the code isn't producing the correct output. Thanks!
<script type = "text/javascript">
function displayImage(elem) {
var img = document.getElementById("dessert");
image.src = elem.value;
}
</script>
<form name="controls">
<select name="dessertchoice" onchange="displayImage(this);">
<option value="">None</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/chocolate.jpg">Chocolate</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/icecream.jpg">Ice Cream</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/fruit.jpg">Fruit</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/brule.jpg">Creme Brulee</option>
</select>
</br></br>
<td>
<img id="dessert" src="" style="width:300px;height:200px;"/>
</td></tr>
</form>

it's just a simple typo, happens to the best of us :)
Change this image.src = elem.value; to img.src = elem.value;
Here is the working example: http://jsbin.com/jamixipiza/1/edit?html,output
Hope that helps!

Try substituting img for image within displayImage
<script type = "text/javascript">
function displayImage(elem) {
var img = document.getElementById("dessert");
img.src = elem.value;
}
</script>
<form name="controls">
<select name="dessertchoice" onchange="displayImage(this);">
<option value="">None</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/chocolate.jpg">Chocolate</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/icecream.jpg">Ice Cream</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/fruit.jpg">Fruit</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/brule.jpg">Creme Brulee</option>
</select>
</br></br>
<td>
<img id="dessert" src="" style="width:300px;height:200px;"/>
</td></tr>
</form>

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, ...

Change image based on dropdown using javascript.

I am a beginer in javascript and I want to change an image based upon options in my dropdown (select)
I find this tutorial, but I am having some problems.
In this tutorial they replace iljbild by the name of the picture files you are going to use
if you want to use the code as it is the names of the picture files have got to be of the same type as in the example, ie the only thing telling the files apart should be a number, e g pict0.gif, pict2.gif etc.
if you are using jpg images you will have to replace gif by jpg.
set the WIDTH and the HEIGHT of the images
if you change the (length of the) words in the selection list you will also have to change the number after charAt (here it is 8)
it's what i did by replacing iljbid by:
http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg
but it doesn't work.

The tutorial expect you to have a list of images with a named convention. That is {prefix}{number}.{extension}. For exmaple:
image0.jpg
image1.jpg
image2.jpg
and so on...
The prefix on all images must be the same, and the extension on all images must be the same. This is a simple tutorial to get the effect done.
It can be expanded once you have more JavaScript knowledge.
Also, that tutorial is really bad (don't mean to disrespect, but it is really lacking. Copying and pasting the example itself into JSFiddle throws errors everywhere).
The tutorial is from 1998. That is 16 years old. I strongly suggest you to look for newer tutorials. (2010+)
Here is an example replica of the tutorial that works:
http://jsfiddle.net/VmWD9/
HTML
<img src="http://www.flowsim.se/picts/selec01.jpg" width="70" height="70" name="myImage" />
<form method="" action="" name="myForm">
<select size="8" name="switch" onchange="switchImage();">
<option value="1">Image 1</option>
<option value="2">Image 2</option>
<option value="3">Image 3</option>
<option value="4">Image 4</option>
<option value="5">Image 5</option>
<option value="6">Image 6</option>
<option value="7">Image 7</option>
</select>
</form>
JavaScript
// This is the code to preload the images
var imageList = Array();
for (var i = 1; i <= 7; i++) {
imageList[i] = new Image(70, 70);
imageList[i].src = "http://www.flowsim.se/picts/selec0" + i + ".jpg";
}
function switchImage() {
var selectedImage = document.myForm.switch.options[document.myForm.switch.selectedIndex].value;
document.myImage.src = imageList[selectedImage].src;
}
Though nowadays people use JavaScript libraries such as jQuery or MooTools to acomplish things like that. I do find that it is better to first explore things in pure JS before heading into these libraries, though it is not a necessity. Most of these libraries are easy to grasp, but when you want to make something big you might need to have prior JS knowledge.
I recommend that you go through the Codecademy JavaScript tutorial.

Here try this FIDDLE
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picute 1</option>
<option value="2">Picute 2</option>
<option value="3">Picute 3</option>
<option value="4">Picute 4</option>
<option value="5">Picute 5</option>
</select>
var pictureList = [
"http://lorempixel.com/400/200/sports/1",
"http://lorempixel.com/400/200/sports/2",
"http://lorempixel.com/400/200/sports/3",
"http://lorempixel.com/400/200/sports/4",
"http://lorempixel.com/400/200/sports/5", ];
$('#picDD').change(function () {
var val = parseInt($('#picDD').val());
$('img').attr("src",pictureList[val]);
});

There are multiple ways to achieve the desired.
This one is by getting the Number value after the select change event and get that src out of the imagesArray Array key.
<select id="changeImage">
<option value="0">image 0</option>
<option value="1">image 1</option>
<option value="2">image 2</option>
</select>
<img id="image" src='//placehold.it/50x50/cf5'>
var imagesArray = [
"//placehold.it/50x50/cf5", // represents val 0,
"//placehold.it/50x50/f1f", // 1,
"//placehold.it/50x50/444" // 2 ...
];
$('#changeImage').change(function(){
$('#image')[0].src = imagesArray[this.value];
});
The other one is to have image names inside the option text:
<select id="changeImage">
<option>image.jpg</option>
<option>something.png</option>
<option>nature.jpg</option>
</select>
<img id="image" src='image.jpg'>
$('#changeImage').change(function(){
$('#image')[0].src = this.value;
});

Update Textbox with Combobox value on ValueChange event

My ultimate goal with this is to make a dropdown that allows user input also. The best I can seem to do is an textbox next a dropdown that makes it look like they are similar, the issue I am running into is that I need the textbox to update whenever my dropdown value is changed. I have some code I've been playing with (below), but it doesn't seem to be getting me anywhere! Any pointers on how I can get this to work, or am I messing up the syntax? (fairly new to both jscript and html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
select
{
width:200px;
}
</style>
<head>
<title>Test</title>
<script type="text/JavaScript">
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
</script>
</head>
<body>
<form action="" method="">
<input name="stroke"/>
<select name="theItems" onchange="otherSelect()">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>

You should execute your script in the window.onload event. The elements are not available to your script when it is being executed. Change your script to this
<script type="text/JavaScript">
window.onload = function(){
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
}
</script>
This way the script will be executed after the HTML elements have been rendered by the browser.

Here's a simple pure JavaScript implementation of what you want. http://jsfiddle.net/24Xhn/
We're going to setup the markup so the select box and the other input box have similar name and id attributes. We'll use classes to setup/initialize the onchange events and make sure the inputs start off hidden and disabled. By toggling the "disabled" attribute, true or false we are making it so the input or select don't show up when the form is submitted, submit the form in the JSFiddle with different combinations and you'll see the output in the query string of the URL.
HTML
<select id="items1" name="items1" class="select-other">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<input id="items1-other" name="items1-other" class="input-other" />
JS
// setup
var inps = document.getElementsByClassName("input-other");
for(var i=0; i<inps.length; i++) {
var inp = inps[i];
// hide & disable the "other" input
inp.style.display = "none";
inp.disabled = true;
// set onchange, if input is empty go back to select
inp.onchange = function() {
var val = this.value;
if(val == "") {
this.style.display = "none";
this.disabled = true;
// get its associated select box
var sel = document.getElementById(this.id.replace(/-other$/i, ""));
sel.style.display = "";
sel.disabled = false;
}
};
}
var sels = document.getElementsByClassName("select-other");
for(var i=0; i<sels.length; i++) {
var sel = sels[i];
// set onchange if value is other switch to input
sel.onchange = function() {
var val = this.value;
if(val == "other") {
this.style.display = "none";
this.disabled = true;
// get associated input box
var inp = document.getElementById(this.id + "-other");
inp.style.display = "";
inp.disabled = false;
}
};
}

I just realized what was wrong. I didn't truly look at the html until I copied and pasted it into a test application and I figured out the issue.
You need to set the id tag to the stroke and theItems not the name tag. That's why it's not doing anything. There was, I'm guessing, a copy/paste issue as well because you didn't have a closing html tag, but I assumed you just missed copying that. Also, you don't really need global variables in order to retrieve the input and select you just need them inside the actual function, and you can actually pass the select into the function like so.
Your code corrected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
select
{
width:200px;
}
</style>
<script type="text/javascript">
function otherSelect(obj)
{
var input = document.getElementById('stroke');
input.value = obj.value;
}
</script>
</head>
<body>
<form action="" method="">
<input id="stroke" name="stroke"/>
<select id="theItems" name="theItems" onchange="otherSelect(this)">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
</html>

I also wanted to create a combobox with an auto-updating text field next to it for new entries, and came up with this in less than an hour, based on simple html and javascript examples from w3schools.com. It works perfectly on my IE browser.
<!DOCTYPE html>
<html>
<head>
<script>
function updateField(name, value)
{
document.getElementById(name).value = value;
}
</script>
</head>
<body>
<select name='10' onchange='updateField(this.name, this.value)'>
<option value='volvo'>Volvo</option>
<option value='saab'>Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="text" id="10" value="volvo">
</body>
</html>

How to use onClick() or onSelect() on option tag in a JSP page?

How to use onClick() or onSelect() with option tag? Below is my code in which I tried to implement that, but it is not working as expected.
Note: where listCustomer domain object list getting in JSP page.
<td align="right">
<select name="singleSelect" ">
<c:forEach var="Customer" items="${listCustomer}" >
<option value="" onClick="javascript:onSelect(this);> <c:out value="${Customer}" /></option>
</c:forEach>
</select>
</td>
How do I modify it to detect that an option is selected?

Neither the onSelect() nor onClick() events are supported by the <option> tag. The former refers to selecting text (i.e. by clicking + dragging across a text field) so can only be used with the <text> and <textarea> tags. The onClick() event can be used with <select> tags - however, you probably are looking for functionality where it would be best to use the onChange() event, not onClick().
Furthermore, by the look of your <c:...> tags, you are also trying to use JSP syntax in a plain HTML document. That's just... incorrect.
In response to your comment to this answer - I can barely understand it. However, it sounds like what you want to do is get the value of the <option> tag that the user has just selected whenever they select one. In that case, you want to have something like:
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>

Even more simplified: You can pass the value attribute directly!
<html>
<head>
<script type="text/javascript">
function changeFunc(i) {
alert(i);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc(value);">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
The alert will either return 1 or 2.

The answer you gave above works but it is confusing because you have used two names twice and you have an unnecessary line of code. you are doing a process that is not necessary.
it's a good idea when debugging code to get pen and paper and draw little boxes to represent memory spaces (i.e variables being stored) and then to draw arrows to indicate when a variable goes into a little box and when it comes out, if it gets overwritten or is a copy made etc.
if you do this with the code below you will see that
var selectBox = document.getElementById("selectBox");
gets put in a box and stays there you don't do anything with it afterwards.
and
var selectBox = document.getElementById("selectBox");
is hard to debug and is confusing when you have a select id of selectBox for the options list . ---- which selectBox do you want to manipulate / query / etc is it the local var selectBox that will disappear or is it the selectBox id you have assigned to the select tag
your code works until you add to it or modify it then you can easily loose track and get all mixed up
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
a leaner way that works also is:
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
and it's a good idea to use descriptive names that match the program and task you are working on am currently writing a similar program to accept and process postcodes using your code and modifying it with descriptive names the object is to make computer language as close to natural language as possible.
<script type="text/javascript">
function Mapit(){
var actualPostcode=getPostcodes.options[getPostcodes.selectedIndex].value;
alert(actualPostcode);
// alert is for debugging only next we go on to process and do something
// in this developing program it will placing markers on a map
}
</script>
<select id="getPostcodes" onchange="Mapit();">
<option>London North Inner</option>
<option>N1</option>
<option>London North Outer</option>
<option>N2</option>
<option>N3</option>
<option>N4</option>
// a lot more options follow
// with text in options to divide into areas and nothing will happen
// if visitor clicks on the text function Mapit() will ignore
// all clicks on the divider text inserted into option boxes
</select>

in this example de select tag is named as: aula_clase_cb
<select class="form-control" id="aula_clase_cb" >
</select>
document.getElementById("aula_clase_cb").onchange = function(e){
id = document.getElementById('aula_clase_cb').value;
alert("id: "+id);
};

<div class="form-group">
<script type="text/javascript">
function activa(){
if(v==0)
document.formulario.vr_negativo.disabled = true;
else if(v==1)
document.formulario.vr_negativo.disabled = true;
else if(v==2)
document.formulario.vr_negativo.disabled = true;
else if(v==3)
document.formulario.vr_negativo.disabled = true;
else if(v==4)
document.formulario.vr_negativo.disabled = true;
else if(v==5)
document.formulario.vr_negativo.disabled = true;
else if(v==6)
document.formulario.vr_negativo.disabled = false;}
</script>
<label>¿Qué tipo de vehículo está buscando?</label>
<form name="formulario" id="formulario">
<select name="lista" id="lista" onclick="activa(this.value)">
<option value="0">Vehiculo para la familia</option>
<option value="1">Vehiculo para el trabajo</option>
<option value="2">Camioneta Familiar</option>
<option value="3">Camioneta de Carga</option>
<option value="4">Vehiculo servicio Publico</option>
<option value="5">Vehiculo servicio Privado</option>
<option value="6">Otro</option>
</select>
<br />
<input type="text" id="form vr_negativo" class="form-control input-xlarge" name="vr_negativo"/>
</form>
</div>

You can change selection in the function
window.onload = function () {
var selectBox = document.getElementById("selectBox");
selectBox.addEventListener('change', changeFunc);
function changeFunc() {
alert(this.value);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Selection</title>
</head>
<body>
<select id="selectBox" onChange="changeFunc();">
<option> select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>

<html>
<head>
<title>Cars</title>
</head>
<body >
<h1>Cars</h1>
<p>Name </p>
<select id="selectBox" onchange="myFunction(value);">
<option value="volvo" >Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<p id="result"> Price : </p>
<script>
function myFunction($value)
{
if($value=="volvo")
{document.getElementById("result").innerHTML = "30L";}
else if($value=="saab")
{document.getElementById("result").innerHTML = "40L";}
else if($value=="mercedes")
{document.getElementById("result").innerHTML = "50L";}
}
</script>
</body>
</html>```

Other option, for similar example but with anidated selects, think that you have two select, the name of the first is "ea_pub_dest" and the name of the second is "ea_pub_dest_2", ok, now take the event click of the first and display the second.
<script>
function test()
{
value = document.getElementById("ea_pub_dest").value;
if ( valor == "value_1" )
document.getElementById("ea_pub_dest_nivel").style.display = "block";
}
</script>

Change onClick() from with onChange() in the . You can send the option value to a javascript function.
<select id="selector" onChange="doSomething(document.getElementById(this).options[document.getElementById(this).selectedIndex].value);">
<option value="option1"> Option1 </option>
<option value="option2"> Option2 </option>
<option value="optionN"> OptionN </option>
</select>

If you need to change the value of another field, you can use this:
<input type="hidden" id="mainvalue" name="mainvalue" value="0">
<select onChange="document.getElementById('mainvalue').value = this.value;">
<option value="0">option 1</option>
<option value="1">option 2</option>
</select>

example dom onchange usage:
<select name="app_id" onchange="onAppSelection(this);">
<option name="1" value="1">space.ecoins.beta.v3</option>
<option name="2" value="2">fun.rotator.beta.v1</option>
<option name="3" value="3">fun.impactor.beta.v1</option>
<option name="4" value="4">fun.colorotator.beta.v1</option>
<option name="5" value="5">fun.rotator.v1</option>
<option name="6" value="6">fun.impactor.v1</option>
<option name="7" value="7">fun.colorotator.v1</option>
<option name="8" value="8">fun.deluxetor.v1</option>
<option name="9" value="9">fun.winterotator.v1</option>
<option name="10" value="10">fun.eastertor.v1</option>
<option name="11" value="11">info.locatizator.v3</option>
<option name="12" value="12">market.apks.ecoins.v2</option>
<option name="13" value="13">fun.ecoins.v1b</option>
<option name="14" value="14">place.sin.v2b</option>
<option name="15" value="15">cool.poczta.v1b</option>
<option name="16" value="16" id="app_id" selected="">systems.ecoins.launch.v1b</option>
<option name="17" value="17">fun.eastertor.v2</option>
<option name="18" value="18">space.ecoins.v4b</option>
<option name="19" value="19">services.devcode.v1b</option>
<option name="20" value="20">space.bonoloto.v1b</option>
<option name="21" value="21">software.devcode.vpnfree.uk.v1</option>
<option name="22" value="22">software.devcode.smsfree.v1b</option>
<option name="23" value="23">services.devcode.smsfree.v1b</option>
<option name="24" value="24">services.devcode.smsfree.v1</option>
<option name="25" value="25">software.devcode.smsfree.v1</option>
<option name="26" value="26">software.devcode.vpnfree.v1b</option>
<option name="27" value="27">software.devcode.vpnfree.v1</option>
<option name="28" value="28">software.devcode.locatizator.v1</option>
<option name="29" value="29">software.devcode.netinfo.v1b</option>
<option name="-1" value="-1">none</option>
</select>
<script type="text/javascript">
function onAppSelection(selectBox) {
// clear selection
for(var i=0;i<=selectBox.length;i++) {
var selectedNode = selectBox.options[i];
if(selectedNode!=null) {
selectedNode.removeAttribute("id");
selectedNode.removeAttribute("selected");
}
}
// assign id and selected
var selectedNode = selectBox.options[selectBox.selectedIndex];
if(selectedNode!=null) {
selectedNode.setAttribute("id","app_id");
selectedNode.setAttribute("selected","");
}
}
</script>

In my case:
<html>
<head>
<script type="text/javascript">
function changeFunction(val) {
//Show option value
console.log(val.value);
}
</script>
</head>
<body>
<select id="selectBox" onchange="changeFunction(this)">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>

focus clears value, so select any value is a change and fires myFunc(this) and blur defocus for reselect
<html>
<head>
<script type="text/javascript">
function myFunc(el) {
//Show option value
console.log(el.value);
}
</script>
</head>
<body>
<select id="selectBox" onchange="myFunc(this);this.blur();" onfocus="this.selectedIndex = -1;">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>