I have 10 navigation tabs in my website. Iam working on retaining the selected value from the drop down and should change the corresponding divs throughout the website....meaning based on selected value the content on all the pages should change...which should not let the user to select everytime ...
I was able to accomplish the toggling of divs, but was not able to save the selected value. Iam a novice to javascript and iam not sure where iam going wrong.
The selected value is being refreshed everytime i go to a new page/tab...which should not happen.The last selected option with its relevant div is not displaying.
Any help would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
createCookie("region", "here", 1);
eraseCookie("region");
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
function setToggle(){
var region = readCookie("region");
var optionElements = document.getElementsByTagName('option');
for(var i=0; i<optionElements.length; i++){
if( optionElements[i].className == 'scanMe' ){
var div = document.getElementById( optionElements[i].getAttribute('divId') );
var selectedOption = optionElements[i].parentNode[optionElements[i].parentNode.selectedIndex];
div.style.display = (selectedOption == optionElements[i]) ? 'block' : 'none';
}
}
return false;
}
</script>
<style type="text/css">
.showHide { display:none;}
</style>
</head>
<body>
<div id="Controls">
<form name="cookieform" id="myControls" action="">
<select name="events_region" onChange="setToggle()">
<option class="scanMe" divId="Version4.0">Version 4.0</option>
<option class="scanMe" divId="Version5.0">Version 5.0</option>
</select>
</form>
</div>
<div class="showHide" id="Version4.0">Iam testing in Version 4.0</div>
<div class="showHide" id="Version5.0">Iam testing in Version 5.0</div>
</body>
</html>