Chained selects

**Bornfree** · 05-14-2007, 10:13 PM

1) Script Title: Chained Selects

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ects/index.htm

3) Describe problem: I can't seem to get this script working. Can someone please help me out? I have read the help file but still can't figure it out.

**Bornfree** · 05-14-2007, 10:52 PM

Ok i did manage to get this going but i get all the balnk options. I mean when the drop down window is clicked, there are no options showing.

**thetestingsite** · 05-14-2007, 10:53 PM

A link to your problem page would be useful.

**Bornfree** · 05-14-2007, 11:13 PM

Sorry.

Here is the link.
www.multicode.com.au/test1.html

**thetestingsite** · 05-14-2007, 11:22 PM

You need to add the onload attribute to your body tag like so:

Code:

<body onload="initListGroup('vehicles', document.forms[0].make, document.forms[0].type, document.forms[0].model, 'save')">

Hope this helps.

//EDIT: I notice you have two body tags (one where it is supposed to go, and the other right before the form). Get rid of this and only use the one (where it actually belongs in the document) with the onload events.

**Bornfree** · 05-14-2007, 11:27 PM

Sorry to bother you again but I still don't get it. The body tag is already there isn't it?
What do i need to change than?

**thetestingsite** · 05-14-2007, 11:51 PM

This is your source code (editted):

Code:

<!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>
<title>Untitled Document</title>
<script language="javascript" src="chainedselects.js">

/***********************************************
* Chained Selects script- By Xin Yang (http://www.yxscripts.com/)
* Script featured on/available at http://www.dynamicdrive.com/
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<script language="javascript" src="exampleconfig2.js"></script>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 200px;
border: 0px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(Graphic1.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color:white ;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 200px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color:black ;
}

.glossymenu li a:hover{
background-image: url(Graphic2.gif);
}
.style2 {font-size: 10px}
.style3 {font-size: 12px}
.style5 {font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
           
<body>
<table width="80&#37;" border="0" align="center" cellpadding="0">
  <tr>
    <td width="762" height="266" valign="top" bgcolor="#F4F4F4"><table width="100%">
      <tr>
        <td width="760"><img src="file:///C|/Documents and Settings/Atinesh/My Documents/web design/Multicode Pty Ltd/website/images/Graphic1.jpg" width="760" height="109" align="top" /></td>

        <td width="21">
		
		<script type="text/javascript">

/***********************************************
* Translucent Slideshow script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var trans_width='100px' //slideshow width
var trans_height='100px' //slideshow height
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var degree=10 //animation speed. Greater is faster.

var slideshowcontent=new Array()
//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]
slideshowcontent[0]=["images/th-fmt15101.jpg", "http://www.cnn.com", "_new"]
slideshowcontent[1]=["images/th-fmtr-2713.jpg", "", ""]
slideshowcontent[2]=["images/th-fmt15102.jpg", "http://www.google.com", ""]


////NO need to edit beyond here/////////////

var bgcolor='#f4f4f4'

var imageholder=new Array()
for (i=0;i<slideshowcontent.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideshowcontent[i][0]
}

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')
}

var curpos=trans_width*(-1)
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function getslidehtml(theslide){
var slidehtml=""
if (theslide[1]!="")
slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
slidehtml+='<img src="'+theslide[0]+'" border="0">'
if (theslide[1]!="")
slidehtml+='</a>'
return slidehtml
}

function moveslide(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(getslidehtml(slideshowcontent[curindex]))
crossobj.document.close()
}
curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0
}

function jumptoslide(which){
curindex=which
rotateslide()
}

function resetit(what){
curpos=parseInt(trans_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=getslidehtml(slideshowcontent[curindex])
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (window.addEventListener)
window.addEventListener("load", startit, false)
else if (window.attachEvent)
window.attachEvent("onload", startit)
else if (ie4||dom||document.layers)
window.onload=startit

</script>

&nbsp;</p>
		
		
		
		 </td>
      </tr>
    </table>
      <table width="270">
          <tr>

            <td width="260" height="141" valign="top"><table width="251">
              <tr>
                <td width="243" height="44"><!-- Google CSE Search Box Begins  -->
                    <form id="searchbox_010687197940181872374:djh12m69aao" action="http://www.google.com/search">
                      <input type="hidden" name="cx" value="010687197940181872374:djh12m69aao" />
                      <input type="hidden" name="cof" value="FORID:0" />
                      <input name="q" type="text" size="20" />
                      <input type="submit" name="sa" value="Search" />
                    </form>

                <!-- Google CSE Search Box Ends --></td>
              </tr>
              </table> 
			<ul class="glossymenu">
<li><a href="http://www.dynamicdrive.com/" >Transmitters</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >Receivers</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Transmitter/ Receiver Kits</a></li>
<li><a href="http://www.javascriptkit.com/domref/">Accessories</a></li>
<li><a href="http://www.cssdrive.com">Transmitter Selection Guide</a></li>

<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Receiver Selection Guide</a></li>		
</ul>            </td>
        </tr>
      </table>
	  
	  <body onload="initListGroup('vehicles', document.forms[0].make, document.forms[0].type, document.forms[0].model, 'cs')">
<h2>&nbsp;</h2>
<form>
<table align="center"><tr>
<td>Select a vehicle:&nbsp;</td>
<td><select name="make" style="width:160px;"></select></td>
<td><select name="type" style="width:160px;"></select></td>

<td><select name="model" style="width:160px;"></select></td>
<td><input type="button" value="Reset" onclick="resetListGroup('vehicles')">
</tr></table>
</form>

Notice the part in red and the part in blue. Remove the part in blue and edit the part in red to that in the below code (Also in red, but bold too):

**thetestingsite** · 05-14-2007, 11:52 PM

Sorry for the double post, but the board won't let me post it all in one post. Anyways, here is the rest of the code (again editted):

Code:

<!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>
<title>Untitled Document</title>
<script language="javascript" src="chainedselects.js">

/***********************************************
* Chained Selects script- By Xin Yang (http://www.yxscripts.com/)
* Script featured on/available at http://www.dynamicdrive.com/
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<script language="javascript" src="exampleconfig2.js"></script>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 200px;
border: 0px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(Graphic1.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color:white ;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 200px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color:black ;
}

.glossymenu li a:hover{
background-image: url(Graphic2.gif);
}
.style2 {font-size: 10px}
.style3 {font-size: 12px}
.style5 {font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body onload="initListGroup('vehicles', document.forms[0].make, document.forms[0].type, document.forms[0].model, 'cs')">

<table width="80&#37;" border="0" align="center" cellpadding="0">
  <tr>
    <td width="762" height="266" valign="top" bgcolor="#F4F4F4"><table width="100%">
      <tr>
        <td width="760"><img src="file:///C|/Documents and Settings/Atinesh/My Documents/web design/Multicode Pty Ltd/website/images/Graphic1.jpg" width="760" height="109" align="top" /></td>

        <td width="21">
		
		<script type="text/javascript">

/***********************************************
* Translucent Slideshow script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var trans_width='100px' //slideshow width
var trans_height='100px' //slideshow height
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var degree=10 //animation speed. Greater is faster.

var slideshowcontent=new Array()
//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]
slideshowcontent[0]=["images/th-fmt15101.jpg", "http://www.cnn.com", "_new"]
slideshowcontent[1]=["images/th-fmtr-2713.jpg", "", ""]
slideshowcontent[2]=["images/th-fmt15102.jpg", "http://www.google.com", ""]


////NO need to edit beyond here/////////////

var bgcolor='#f4f4f4'

var imageholder=new Array()
for (i=0;i<slideshowcontent.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideshowcontent[i][0]
}

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')
}

var curpos=trans_width*(-1)
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function getslidehtml(theslide){
var slidehtml=""
if (theslide[1]!="")
slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
slidehtml+='<img src="'+theslide[0]+'" border="0">'
if (theslide[1]!="")
slidehtml+='</a>'
return slidehtml
}

function moveslide(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(getslidehtml(slideshowcontent[curindex]))
crossobj.document.close()
}
curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0
}

function jumptoslide(which){
curindex=which
rotateslide()
}

function resetit(what){
curpos=parseInt(trans_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=getslidehtml(slideshowcontent[curindex])
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (window.addEventListener)
window.addEventListener("load", startit, false)
else if (window.attachEvent)
window.attachEvent("onload", startit)
else if (ie4||dom||document.layers)
window.onload=startit

</script>

&nbsp;</p>
		
		
		
		 </td>
      </tr>
    </table>
      <table width="270">
          <tr>

            <td width="260" height="141" valign="top"><table width="251">
              <tr>
                <td width="243" height="44"><!-- Google CSE Search Box Begins  -->
                    <form id="searchbox_010687197940181872374:djh12m69aao" action="http://www.google.com/search">
                      <input type="hidden" name="cx" value="010687197940181872374:djh12m69aao" />
                      <input type="hidden" name="cof" value="FORID:0" />
                      <input name="q" type="text" size="20" />
                      <input type="submit" name="sa" value="Search" />
                    </form>

                <!-- Google CSE Search Box Ends --></td>
              </tr>
              </table> 
			<ul class="glossymenu">
<li><a href="http://www.dynamicdrive.com/" >Transmitters</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >Receivers</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Transmitter/ Receiver Kits</a></li>
<li><a href="http://www.javascriptkit.com/domref/">Accessories</a></li>
<li><a href="http://www.cssdrive.com">Transmitter Selection Guide</a></li>

<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Receiver Selection Guide</a></li>		
</ul>            </td>
        </tr>
      </table>

<h2>&nbsp;</h2>
<form>
<table align="center"><tr>
<td>Select a vehicle:&nbsp;</td>
<td><select name="make" style="width:160px;"></select></td>
<td><select name="type" style="width:160px;"></select></td>

<td><select name="model" style="width:160px;"></select></td>
<td><input type="button" value="Reset" onclick="resetListGroup('vehicles')">
</tr></table>
</form>

Hope this makes sense and helps.

**Bornfree** · 05-15-2007, 09:49 PM

Thanks a lot. Just one more question. What do i have to change to get a 4th option? I have been trying but cant figure it out

**Bornfree** · 05-15-2007, 10:26 PM

Hey i finally figured it out. You have to add it in the body onload tag

Thread: Chained selects

Thread Tools

Search Thread

Chained selects

More help

Bookmarks

Bookmarks

Posting Permissions