View Full Version : Select Menu (onClick simulation)

01-20-2009, 11: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.

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

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

Here is the javascript function:

<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);


01-21-2009, 01:49 AM
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:

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

<html lang="en-Latn">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="application/ecmascript">
<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; }
<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");

<body onload="script();">

<label for="selectTab">Select Tab</label>
<select id="selectTab">
<option value="tab1" selected="selected">1</option>
<option value="tab2">2</option>

<p id="tab1" class="tab active">This is the first “tab”.</p>
<p id="tab2" class="tab">This is the second “tab”.</p>


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.

01-21-2009, 05: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.


01-22-2009, 07:21 AM
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.

01-22-2009, 04: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.

02-06-2009, 09: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.

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

window.onload = tabs(); {
// load tab function on window load

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:

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 :confused:

06-02-2009, 07:41 PM
interesting post. very informative.:thumbsup:

simulation rachat de credit (http://simulationrachatdecredit.org)