Advanced Search

Results 1 to 10 of 10

Thread: Chained selects

  1. #1
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Chained selects

    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.

  2. #2
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    A link to your problem page would be useful.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  4. #4
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Sorry.

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

  5. #5
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    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.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  6. #6
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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?

  7. #7
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    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):
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  8. #8
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    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.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  9. #9
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default More help

    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

  10. #10
    Join Date
    Nov 2006
    Posts
    116
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •