PDA

View Full Version : Chained selects



enviro
01-11-2008, 06:22 PM
URL http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm

I'm new to this... so please bare with me.

I'm trying to setup a chained select which is working fine?!

The problem I'm having is when i try to preview the page in IE it gives me an error box saying that the script is taking too long etc.

I will attach the JS data file denoted services.js, and paste the htm file script.

Please advise as much as possible. I do not know if I could change around the addList and addOption in any wat to speed up the loading in IE.


Thank you:confused:

Fernando



htm file


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<script type="text/javascript">
<!--
<!-- hide

//-->
</script>
<script language="JavaScript1.2" src="mm_menu.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/cs.css">
<script language="javascript" src="JS/chainedselects.js"></script>
<script language="javascript" src="JS/services.js"></script>
<script language="javascript">
function checkList(list, order, instance) {
alert("List Group Instance Order: "+instance+"\nSelect List Order: "+order+"\nOption Value: "+list.value);
}
</script>
</head>
<body onload="initListGroup('vehicles', document.forms[0].C1, document.forms[0].C2, document.forms[0].C3, document.forms[0].C4, document.forms[0].C5, 'cs')">
<script language="JavaScript1.2" type="text/javascript">
mmLoadMenus();
</script>
<table id="AutoNumber4" style="border-width: 0pt; border-collapse: collapse; width: 872px" border="0" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td style="border-style: none; border-width: medium;" valign="top" width="130">
<p class="bodytextSmaller">
&nbsp;</p>
</td>
<td style="border-style: none; border-width: medium;" valign="top" width="742">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="bodytextSmaller">
<tr>
<td bgcolor="#55BE47" width="378" height="23">
<p style="margin-top: 0; margin-bottom: 0"><font face="Verdana" size="2" color="#FFFFFF">&nbsp;&nbsp; </font>
<font size="2" color="#FFFFFF">Service Advisor</font></td>
</tr>
</table>
<p style="margin-top: 0; margin-bottom: 0" class="bodytextSmaller">&nbsp;</p>
<p style="margin-top: 0; margin-bottom: 0" class="bodytextSmaller">&nbsp;</p>
<p style="margin-top: 0; margin-bottom: 0" class="bodytextSmaller">&nbsp;</p>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="718"><tr>
<td width="718">
<form>
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
<table width="683" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td width="133">
<p style="margin-top: 0; margin-bottom: 0">Contract Name:<td colspan="4" width="550">
<p style="margin-top: 0; margin-bottom: 0">
<input type="text" name="T1" size="30"></tr>
<tr>
<td width="133">
<p style="margin-top: 0; margin-bottom: 0">Contract Address:<td colspan="4" width="550">
<p style="margin-top: 0; margin-bottom: 0">
<input type="text" name="T2" size="60"></tr>
<tr>
<td width="133">
<p style="margin-top: 0; margin-bottom: 0">Telephone:<td colspan="4" width="550">
<p style="margin-top: 0; margin-bottom: 0">
<input type="text" name="T3" size="20"></tr>
<tr>
<td width="133">
<p style="margin-top: 0; margin-bottom: 0">Contact Person:<td colspan="4" width="550">
<p style="margin-top: 0; margin-bottom: 0">
<input type="text" name="T4" size="30"></tr>
<tr>
<td width="133">
<p style="margin-top: 0; margin-bottom: 0">Square-feet:<td colspan="4" width="550">
<p style="margin-top: 0; margin-bottom: 0">
<input type="text" name="T4" size="15"></tr>
<tr>
<td width="133">
<p style="margin-top: 0; margin-bottom: 0">Levels:<td colspan="4" width="550">
<p style="margin-top: 0; margin-bottom: 0">
<input type="text" name="T4" size="15"></tr>
<tr>
<td width="133">
<p style="margin-top: 0; margin-bottom: 0">Employees at location:<td colspan="4" width="550">
<p style="margin-top: 0; margin-bottom: 0">
<input type="text" name="T4" size="15"></tr>
<tr>
<td width="133">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;<td width="87">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;<td width="220">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;<td colspan="2" width="243" rowspan="13" align="left" valign="top">
<p style="margin-top: 0; margin-bottom: 0">Inherent service options.</p>
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p style="margin-top: 0; margin-bottom: 0">
<select name="C2" size="10" style="font-size: 8pt"></select></tr>
<tr>
<td width="133">
<p style="margin-top: 0; margin-bottom: 0">Select your industry:<td colspan="2" width="307">
<p style="margin-top: 0; margin-bottom: 0">
<select name="C1"></select></tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="3" width="440">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;<td colspan="2" width="243">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr>
<td colspan="5" width="683">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</tr>
<tr><td colspan="5" width="683">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;<tr>
<td width="220" style="border-style: none; border-width: medium" valign="top" colspan="2">
<p style="margin-top: 0; margin-bottom: 0">
&nbsp;<p style="margin-top: 0; margin-bottom: 0">
&nbsp;</td>
<td width="220" style="border-style: none; border-width: medium" colspan="2">
<p style="margin-top: 0; margin-bottom: 0">
&nbsp;</td>
<td width="243" style="border-style: none; border-width: medium">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
</tr>
<tr>
<td width="220" style="border-style: none; border-width: medium" valign="top" colspan="2">
<p style="margin-top: 0; margin-bottom: 0">Service Options</p>
<p style="margin-top: 0; margin-bottom: 0">
<select multiple name="C3"></select></p>
<p style="margin-top: 0; margin-bottom: 0"><font color="#FF6900">HOLD
&lt;ctrl&gt; key for&nbsp; multiple entries</font></td>
<td width="220" style="border-style: none; border-width: medium" valign="top" colspan="2">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p style="margin-top: 0; margin-bottom: 0">
<select multiple name="C4"></select></p>
<p style="margin-top: 0; margin-bottom: 0"><font color="#FF6900">HOLD
&lt;ctrl&gt; key for&nbsp; multiple entries</font></td>
<td width="243" style="border-style: none; border-width: medium" valign="top">
<p style="margin-top: 0; margin-bottom: 0">Custom service options.</p>
<p style="margin-top: 0; margin-bottom: 0">
<select multiple name="C5"></select></td>
</tr>
<tr>
<td width="220" style="border-style: none; border-width: medium" colspan="2">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
<td width="220" style="border-style: none; border-width: medium" colspan="2">
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
<td width="243" style="border-style: none; border-width: medium">
<p style="margin-top: 0; margin-bottom: 0"><input type="button" value="Reset" onclick="resetListGroup('vehicles',1)"></td>
</tr>
</table>
</td></tr>
</table>
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
</tr>
</table>
<script language="JavaScript1.2" type="text/javascript">
var clickmessage="All images are copyrighted and may not be used without express written permission from Enviro."
function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}
function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}
if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
</script>
<script language="JavaScript" type="text/javascript" src="JS/floating_menu.js"></script>
</body>
</html>:confused: