Select Menu (onClick simulation)

sternTOOL · 01-20-2009, 10:53 PM

I am trying to simulate a simple onClick function with a select menu. The below code does not work but explains what I am trying to achieve.

Code:

<select name="get_quote" id="get_quote">
<option selected id="tab1" onClick="javascript:show_tab('tab1')">Yes</option>
<option id="tab2" onClick="javascript:show_tab('tab2')">No</option>
</select>

Is there anyway to achieve this by using the onChange function with the select tag?

Here is the javascript function:

Code:

<script language="JavaScript">
last_tab = 'tab1';
function show(layerName) {
document.getElementById(layerName).style.display = '';
}

function hide(layerName) {
document.getElementById(layerName).style.display = 'none';
}
function show_tab(tab_name) {
document.getElementById(last_tab).className = 'tab';
var curr = document.getElementById(tab_name);
curr.className='tab_hover';
hide(last_tab+'_info');
show(tab_name+'_info');
last_tab=tab_name;
}
</script>

Thanks,
Ian

Arbitrator · 01-21-2009, 12:49 AM

Quote:

Originally Posted by sternTOOL

Is there anyway to achieve this by using the onChange function with the select tag?

I presume that you refer to the onchange attribute of the select element.

I don’t know if this works for you, but the following code utilizes the onchange event without using the HTML attribute:

Code:

<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html lang="en-Latn">
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Content-Script-Type" content="application/ecmascript">
		<title>Demo</title>
		<style type="text/css" media="all">
			* { margin: 0; padding: 0; }
			html { background: white; color: black; }
			div { margin: 1em; }
			select { font: inherit; } /* Mozilla Firefox */
			p { margin: 1em; padding: 1em; line-height: 2em; }
			*#tab1 { background: lightblue; }
			*#tab2 { background: pink; }
			*.tab.active { display: block; }
		</style>
		<script type="text/ecmascript">
			function script() {
				var d = document;
				var styleSheet1 = d.styleSheets.item(0);
				var selectElement = d.getElementById("selectTab");
				var activeTab = d.getElementById("tab1");
				var classAttr = "class";
				if (d.implementation.hasFeature("CSS", "2.0") && d.implementation.hasFeature("Events", "2.0")) {
					styleSheet1.insertRule("*.tab { display: none; }", styleSheet1.cssRules.length);
					selectElement.addEventListener("change", setNewActiveTab, false);
				}
				else { // Windows Internet Explorer
					styleSheet1.addRule("*.tab", "display: none;", -1);
					classAttr = "className";
					selectElement.attachEvent("onchange", setNewActiveTab);
				}
				function setNewActiveTab() {
					activeTab.setAttribute(classAttr, activeTab.getAttribute(classAttr).replace(/ active/, ""));
					activeTab = d.getElementById(selectElement.value);
					activeTab.setAttribute(classAttr, activeTab.getAttribute(classAttr) + " active");
				}
			}
		</script>

	</head>
	<body onload="script();">

		<div>
			<label for="selectTab">Select Tab</label>
			<select id="selectTab">
				<option value="tab1" selected="selected">1</option>
				<option value="tab2">2</option>
			</select>
		</div>
		
		<p id="tab1" class="tab active">This is the first “tab”.</p>
		<p id="tab2" class="tab">This is the second “tab”.</p>

	</body>
</html>

Verified to work in Mozilla Firefox 3.0.5, Opera 9.63, Safari 3.2.1 (525.27.1), and Windows Internet Explorer 7.0.6001.18000.

sternTOOL · 01-21-2009, 04:21 PM

This works great, but is there anyway to work a third tab into this function?

There are some areas on my site where I will need this to cycle through 3 tabs instead of 2.

Thanks,
Ian

Arbitrator · 01-22-2009, 06:21 AM

Quote:

Originally Posted by sternTOOL

This works great, but is there anyway to work a third tab into this function?

Yes, add a new option element referencing the third tab.

sternTOOL · 01-22-2009, 03:53 PM

I tried that originally, but looking over my code I found a typo on the third option (I'm an idiot). Works perfectly!

Thank you for all of your help.
-Ian

sternTOOL · 02-06-2009, 08:23 PM

Hi again, I've been using this code for a while now and it works great. The only problem is that in Internet Explorer the <body onload="tabs();"> takes a little too long to load which results in the hidden tabs being visible until all of the images on the page have finished loading. Granted it is only for about a second or two but still is a problem.

I have experimented using window.onload function but I am not very smart when it comes to javascript.

Code:

<script language="JavaScript" type="text/javascript">

window.onload = tabs(); {
    // load tab function on window load
}
</script>

This ultimately worked but created a javascript error " 'null' is null or not an object " and points to line 39.

here is line 39 from the script:

Code:

selectElement.attachEvent("onchange", setNewActiveTab);

What am I doing wrong here? Can I achieve this without the javascript error?

Thanks in advance - sorry I'm stupid

meow44 · 06-02-2009, 06:41 PM

interesting post. very informative.

simulation rachat de credit