Snitz Forums 2000
Snitz Forums 2000
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
 Password:
Save Password
Forgot your Password?

 All Forums
 Community Forums
 Community Discussions (All other subjects)
 Javascript Select Option Question?		  New Topic  Topic Locked
 Printer Friendly
Author Previous Topic Topic Next Topic  

JJenson
Advanced Member

USA
2121 Posts
Posted - 31 January 2008 :  20:41:00  Show Profile  Visit JJenson's Homepage
Basically I have a drop down list. I haev 4 options in this list what I need to do is when soeone selects an option that it will show an image in a div based on which option they selected.

I hope this makes sense.


<select name="select">
<option value="Clean" selected>Clean</option>
<option value="Colorful">Colorful</option>
<option value="MainStream">Main Stream</option>
<option value="OutsideTheBox">Outside The Box</option>
</select>


Now the first one is selected and is showing by default. But if someone selects a different one I want the image to change this is my image code:


<div id="kaia"><img src="images/sites/kaia.jpg" /></div>
<div id="vmcplugins" style="visibility:hidden; position:absolute;"><img src="images/sites/vmcplugins.jpg" /></div>
<div id="kaia" style="visibility:hidden; position:absolute;"><img src="images/sites/kaia.jpg" /></div>
<div id="zito" style="visibility:hidden; position:absolute;"><img src="images/sites/zito.jpg" /></div>


ANyone point me in the right direction?

Thanks All

Hamlin
Advanced Member

United Kingdom
2386 Posts
Posted - 01 February 2008 :  03:21:04  Show Profile
onchange event on the select have a function something like this

onchange="fnSwitchDiv(this);"

functionSwitchDiv(_oSlc)
{
	var _optionValue = _oSlc.options[_oSlc.selectedIndex].value;

	//Some code here to hide the div that is currently displayed, if you only have 4 then just turn them all off, otherwise you need to remember what you last selected.

	switch(_optionValue)
	
	{

		case 'Clean':
		document.getElemenyById('Id of elmenet toshow when clean').style.display='block';
		break;
		//repeat for each case
  	}
}


Something like that anyway
Go to Top of Page

JJenson
Advanced Member

USA
2121 Posts
Posted - 12 February 2008 :  17:36:56  Show Profile  Visit JJenson's Homepage
I probably blew this up completely but can you point me where I went wrong?


<script type="text/javascript">
 function SwitchDiv(_oSlc)
{
	var _optionValue = _oSlc.options[_oSlc.selectedIndex].value;

	if(elementId.visibility == "visible"){
				elementId.visibility = "hidden";
	}else{
				elementId.visibility = "visible";
				
	switch(_optionValue)
	
	{

		case 'Clean':
		document.getElemenyById('link1').style.display='block';
		break;
		
		case 'Clean':
		document.getElemenyById('link2').style.display='block';
		break;
		
		case 'Clean':
		document.getElemenyById('link3').style.display='block';
		break;
		
		case 'Clean':
		document.getElemenyById('link4').style.display='block';
		break;
		//repeat for each case
  	}
}
</script>



<select name="select">
          <option value="Clean" onchange="SwitchDiv('link1')" selected>Clean</option>
          <option value="Colorful" onchange="SwitchDiv('link2')">Colorful</option>
          <option value="MainStream" onchange="SwitchDiv('link3')">Main Stream</option>
          <option value="OutsideTheBox" onchange="SwitchDiv('link4')">Outside The Box</option>
        </select>


NOthing is happening on the page at all. You can see it at makeityourweb.com/index.html
Edited by - JJenson on 12 February 2008 17:37:30
Go to Top of Page

muzishun
Senior Member

United States
1079 Posts
Posted - 13 February 2008 :  01:13:52  Show Profile  Visit muzishun's Homepage
You might take a look at the Avatar MOD. I seem to remember that in the profile page, when you choose your avatar, the image changes based on your selection. It should at least give you a good starting off point.
Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com)
Go to Top of Page

Hamlin
Advanced Member

United Kingdom
2386 Posts
Posted - 13 February 2008 :  04:44:48  Show Profile 

<select name="select">
          <option value="Clean" onchange="SwitchDiv('link1')" selected>Clean</option>
          <option value="Colorful" onchange="SwitchDiv('link2')">Colorful</option>
          <option value="MainStream" onchange="SwitchDiv('link3')">Main Stream</option>
          <option value="OutsideTheBox" onchange="SwitchDiv('link4')">Outside The Box</option>
        </select>

The onchange event should go on the select i.e. <select name="select" onchange="SwitchDiv(this);">.

Also your switch statements all have the same value i.e. "case 'Clean':" Each case should be different.
Go to Top of Page

JJenson
Advanced Member

USA
2121 Posts
Posted - 13 February 2008 :  09:13:37  Show Profile  Visit JJenson's Homepage
Oh ok that makes sense. I am sorry dealt just a little with javascript need to learn it better.

Thanks will try that later today.

Jeff
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Topic Locked
 Printer Friendly
Jump To:
Snitz Forums 2000 © 2000-2021 Snitz™ Communications Go To Top Of Page
This page was generated in 0.27 seconds. Powered By: Snitz Forums 2000 Version 3.4.07