HTMLHelp Forums > JS drop down menu displays below select box forms

Full Version: JS drop down menu displays below select box forms

HTMLHelp Forums > Web Authoring > General Web Design

MariaP

Apr 30 2009, 03:29 PM

hi, I'm a newbie to the group. i've done a search for my question and did not find the answer, so my apologies for any duplications.

I have twp stacked javascript drop down nav menus, and below the second menu I have three part form that will display based on selections. However, my drop down select box is displaying above my JS menu???

I understand this a common problem, can anyone point me to the common solution?

I'm using a z-index to control the dd nav default to display on the top, and it works for the navs to display correctly in referrance to each other and the content, except my region and country select box forms?

It may be related to my code for the form. I have three forms in the same table, 1= region 2=country select (actually three forms but depending on the region selection, the coutry select form displays), 3= go button. Forms 2&3 are hidden till a selection on Form 1 is made. All works great except Forms 1 and 2 default display on top, but form 3 displays properly (below the drop down menus)

Can anyone help?

THANK YOU!

See images sample of issue:

http://www.flickr.com/photos/37917620@N02/3488882625/

Code for my region/country selection box forms:
************************************************************************
<script language="javascript" type="text/javascript">

/* *** Global Variables*** */
var region = "none";
var country = "none";
var regionSaved = "";
var regionChanged = "false";
var countryVal = "";
var cookieVal = "";

function show(id) // function used to display a form element (country list, 'Go' button, etc.) - via a div id
{
obj = document.getElementById(id);
obj.style.display = "";
} /* end show() */

function hide(id) // function used to hide a form element - via a div id
{
obj = document.getElementById(id);
obj.style.display = "none";
} /* end hide() */

function enableCountry() // called via an onChange event from the Region select list
{
var regionVal = getCookie("regionCookie"); // check to see if there's a saved cookie with a value for Region

region = document.formRegion.selectRegion.options[document.formRegion.selectRegion.selectedIndex].value;

if ( (regionVal != null) && (regionVal != "") && (region == "none") )
{
region = regionVal;
regionChanged = "true";
}
else
{
regionChanged = "false";
}

// Set the value of the Region Select list to the cookie value,
// or if no cookie, to the value that the user just selected
setSelectValue("formRegion.selectRegion", region);

// Show and hide the country select lists based on the Region
if (region == "americas")
{
hide('apac');
hide('emea');
show('americas');
show('goBtn');
}
else if (region == "apac")
{
hide('americas');
hide('emea');
show('apac');
show('goBtn');
}
else if (region == "emea")
{
hide('americas');
hide('apac');
show('emea');
show('goBtn');
}
else
{
hide('americas');
hide('apac');
hide('emea');
region = "";
hide('goBtn');
} /* end if */

setCookie("regionCookie", region, 1000); // create the region cookie...expires in 1000 days

// Check to see if there's a country cookie to go along with the selected region, and if so,
// set the country select list to that cookie value as the default
countryVal = getCookie("countryCookie");
if ( (countryVal != null) && (countryVal != "") )
{
country = countryVal;
if (region == "americas")
setSelectValue("countryForm.selectAmericas", country);
else if (region == "apac")
setSelectValue("countryForm.selectAPAC", country);
else if (region == "emea")
setSelectValue("countryForm.selectEMEA", country);
show('goBtn');
} /* end if */

} /* end enableCountry() */

function selectCountry() // called via an onChange event from the Country select list
{
if (region == "americas")
{
country = document.countryForm.selectAmericas.options[document.countryForm.selectAmericas.selectedIndex].value;
show('goBtn');
}
else if (region == "apac")
{
country = document.countryForm.selectAPAC.options[document.countryForm.selectAPAC.selectedIndex].value;
show('goBtn');
}
else if (region == "emea")
{
country = document.countryForm.selectEMEA.options[document.countryForm.selectEMEA.selectedIndex].value;
show('goBtn');
}
else
{
document.countryForm.selectAmericas.options[document.countryForm.selectAmericas.selectedIndex].value = "none";
document.countryForm.selectAPAC.options[document.countryForm.selectAPAC.selectedIndex].value = "none";
document.countryForm.selectEMEA.options[document.countryForm.selectEMEA.selectedIndex].value = "none";
country = "";
hide('goBtn');
} /* end if */

setCookie("countryCookie", country, 1000); // create the country cookie...expires in 1000 days

} /* end selectCountry() */

// Set the value to be displayed in the Select list based on the Select list name and value
// passed to this function (most likely came from cookie value)
function setSelectValue(selectName, setValue)
{
eval('SelectObject = document.' + selectName + ';');
for(index = 0; index < SelectObject.length; index++)
{
if (SelectObject[index].value == setValue)
{
SelectObject.selectedIndex = index;
} /* end if */
} /* end for */
} /* end setSelectValue */

// *** COOKIE CODE BEGINS HERE *** //

// Returns value stored in the cookie name passed to this function...returns null if no cookie
function getCookie(cookieName)
{
if (document.cookie.length > 0)
{
cookieStart = document.cookie.indexOf(cookieName + "=");
if (cookieStart != - 1)
{
cookieStart = cookieStart + cookieName.length + 1;
cookieEnd = document.cookie.indexOf(";", cookieStart);

if (cookieEnd == -1)
cookieEnd = document.cookie.length;

return unescape(document.cookie.substring(cookieStart, cookieEnd));
} /* end if */
} /* end if */
return "";
} /* end getCookie() */

// Store a cookie with the name, value, and number of days before expiring parameters which are passed to this function
function setCookie(cookieName, value, expiredays)
{
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = cookieName + "=" + escape(value) +
( (expiredays == null) ? "" : "; expires=" + exdate.toGMTString() );
} /* end setCookie() */

// *** COOKIE CODE ENDS HERE *** //

</script>


<table width="95%" border="0" cellpadding="-10" cellspacing="0">
<tr>
<td align="right"><table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="10">  </td>
<td width="150" align="right" valign="middle"><div style="display: inline;" id="regionDiv" class="formElement">
<form name="formRegion" style="border-top: none; border-bottom: none; margin-bottom: 0px;
margin-top:0px; font-size: 10px;" class="formElement">
<select name="selectRegion" id="selectRegion" onChange="enableCountry();">
<option value="none" selected="selected">Select Region</small></option>
<option value="americas">Americas</small></option>
<option value="apac">APAC</small></option>
<option value="emea">EMEA</small></option>
</select>
</form>
</div></td>
<td width="10">   </td>

<td width="150" align="left" valign="middle"><form name="countryForm" id="countryForm" style="border-top:none; border-bottom:none; margin-bottom:0px;
margin-top:0px; font-size:10px;" class="formElement">
<div style="display: none;" id="americas" class="formElement">
<select id="selectAmericas" name="selectAmericas" onChange="selectCountry();">
<option value="none" selected="selected">Select Country
               </option>
<option value="argentina">Argentina</option>
<option value="brazil">Brazil</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
<option value="usa">United States</option>
</select>
</div>
<div id="apac" style="display: none;" class="formElement">
<select id="selectAPAC" name="selectAPAC" onChange="selectCountry();">
<option value="none" selected="selected">Select Country
               </option>
<option value="australia">Australia</option>
<option value="china">China</option>
<option value="hongKong">Hong Kong</option>
<option value="india">India</option>
<option value="japan">Japan</option>
<option value="korea">Korea</option>
<option value="malaysia">Malaysia</option>
<option value="newZealand">New Zealand</option>
<option value="singapore">Singapore</option>
<option value="thailand">Thailand</option>
<option value="vietnam">Vietnam</option>
</select>
</div>
<div id="emea" style="display: none;" class="formElement">
<select id="selectEMEA" name="selectEMEA" onChange="selectCountry();" >
<option value="none" selected="selected">
<xsmall>Select Country</xsmall>
</option>
<option value="austria">
<xsmall>Austria</xsmall>
</option>
<option value="belgium">
<xsmall>Belgium</xsmall>
</option>
<option value="czechRepublic">
<xsmall>Czech Republic</xsmall>
</option>
<option value="denmark">
<xsmall>Denmark</xsmall>
</option>
<option value="egypt">
<xsmall>Egypt</xsmall>
</option>
<option value="finland">
<xsmall>Finland</xsmall>
</option>
<option value="france">
<xsmall>France</xsmall>
</option>
<option value="germany">
<xsmall>Germany</xsmall>
</option>
<option value="greece">
<xsmall>Greece</xsmall>
</option>
<option value="hungary">
<xsmall>Hungary</xsmall>
</option>
<option value="ireland">
<xsmall>Ireland</xsmall>
</option>
<option value="israel">
<xsmall>Israel</xsmall>
</option>
<option value="italy">
<xsmall>Italy</xsmall>
</option>
<option value="lebanon">
<xsmall>Lebanon</xsmall>
</option>
<option value="macedonia">
<xsmall>Macedonia</xsmall>
</option>
<option value="morocco">
<xsmall>Morocco</xsmall>
</option>
<option value="netherlands">
<xsmall>Netherlands</xsmall>
</option>
<option value="norway">
<xsmall>Norway</xsmall>
</option>
<option value="pakistan">
<xsmall>Pakistan</xsmall>
</option>
<option value="poland">
<xsmall>Poland</xsmall>
</option>
<option value="portugal">
<xsmall>Portugal</xsmall>
</option>
<option value="russia">
<xsmall>Russia</xsmall>
</option>
<option value="saudiArabia">
<xsmall>Saudi Arabia</xsmall>
</option>
<option value="southAfrica">
<xsmall>South Africa</xsmall>
</option>
<option value="spain">
<xsmall>Spain</xsmall>
</option>
<option value="turkey">
<xsmall>Turkey</xsmall>
</option>
<option value="uae">
<xsmall>United Arab Emirates</xsmall>
</option>
<option value="uk">
<xsmall>United Kingdom</xsmall>
</option>
<option value="yugoslavia">
<xsmall>Yugoslavia</xsmall>
</option>
</select>
</div>
</form></td>
<td width="10">   </td>
<td width="30" align="center" valign="top"><div style="display: none;" id="goBtn" class="formElement">
<form action="get" style="border-top: none; border-bottom: none; margin-bottom: 0px;
margin-top: 0px; font-size: 9px;" id="goBtn" class="formElement">
<input type="button" id="goButton" onclick="history.go(0);" value=" Go "
style="font-size: 11px;">
</form>
</div></td>
</tr>
</table></td>
</tr>
</table>

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.