Dropdown html displaying divs - html

Question

I am wanting to create a JavaScript drop down for my website and I want it to display divs underneath.
<select name="Portfolio">
<option id="1">Option 1</option>
<option id="2">Option 2</option>
<option id="3">Option 3</option>
<option id="4">Option 4</option>
</select>
<div id="1"><img src="URL" alt="Blah Blah Blah"/></div>
<div id="2"><img src="URL" alt="Blah Blah Blah"/></div>
What JavaScript code do i need for this to work? Any help will be greatly appreciated! I have looked at so many others but can't seem to get anything to work.

Answer 1

See jsfiddle link demo
<select name="Portfolio">
<option>None</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div id="1" style="display:none;"><img src="img1" alt="Blah Blah Blah"/></div>
<div id="2" style="display:none;"><img src="img2" alt="Blah Blah Blah"/></div>
var old_id
$(function(){
$("select").change(function(){
$('div').css('display','none');
$('#'+$(this).val()).css('display','block');
});
});

Answer 2

<select name="Portfolio" id="portfolio">
<option>None</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option alue="4">Option 4</option>
</select>
<div id="1" style="display:none;"><img src="URL" alt="Blah Blah Blah"/></div>
<div id="2" style="display:none;"><img src="URL" alt="Blah Blah Blah"/></div>
$(document).ready(function() {
$("select").change(function() {
$('div').hide();
$('#'+$(this).val()).show();
});
});
run this in jsfiddle

Answer 3

Firstly, you're using id attributes in <option> i'd suggest using value instead; so your markup would be somewhat like this:
<select name="Portfolio">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
then, if you're not using jQuery a simple javascript approach to your problem would be like:
window.onload = function() {
document.getElementsByTagName('select')[0].onchange = function() {
document.getElementById(this.value).style.display = 'block';
}
}
In case you've have a problem with multiple images showing up on subsequent drop-down changes, hide all the divs every time the onchange() is triggered
see this working fiddle.