Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Making two Value Lists interact

    What i am trying to do is have a value list of 5 selections. All the slections will do nothing but give thier form value. But Selection #3 in the value list must open another value list below that has the options for Selection 3.

    So, if you select selection 3 from the list, you will then have to choose a second choice from the second value list that either appears or becomes active. I really need to get this done soon since I am on a deadline.

    I need this to work cross browser, including Safari, not just IE. Hope this will work.

    Thanks

  • #2
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Here is the code I have so far.

    <form name="doublecombo">
    <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
    <option>Technology Sites</option>
    <option>News Sites</option>
    <option>Search Engines</option>
    </select>
    <select name="stage2" size="1">
    <option value="http://javascriptkit.com">JavaScript Kit</option>
    <option value="http://www.news.com">News.com</option>
    <option value="http://www.wired.com">Wired News</option>
    </select>
    <input type="button" name="test" value="Go!"
    onClick="go()">
    </p>

    <script>
    <!--

    /*
    Double Combo Script Credit
    By JavaScript Kit (www.javascriptkit.com)
    Over 200+ free JavaScripts here!
    */

    var groups=document.doublecombo.example.options.length
    var group=new Array(groups)
    for (i=0; i<groups; i++)
    group[i]=new Array()

    group[0][0]=new Option("JavaScript Kit","http://javascriptkit.com")
    group[0][1]=new Option("News.com","http://www.news.com")
    group[0][2]=new Option("Wired News","http://www.wired.com")

    group[1][0]=new Option("CNN","http://www.cnn.com")
    group[1][1]=new Option("ABC News","http://www.abcnews.com")

    group[2][0]=new Option("Hotbot","http://www.hotbot.com")
    group[2][1]=new Option("Infoseek","http://www.infoseek.com")
    group[2][2]=new Option("Excite","http://www.excite.com")
    group[2][3]=new Option("Lycos","http://www.lycos.com")

    var temp=document.doublecombo.stage2

    function redirect(x){
    for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null
    for (i=0;i<group[x].length;i++){
    temp.options[i]=new Option(group[x][i].text,group[x][i].value)
    }
    temp.options[0].selected=true
    }

    function go(){
    location=temp.options[temp.selectedIndex].value
    }
    //-->
    </script>

    </form>

    That is the code that I have so far. And it works great in a form by its self. But when I try to add the code to my form that I have created, it does not work, why?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    function 
    Select(i){
     
    document.getElementById('stage2').style.visibility='hidden';
     if (
    i==2){
      
    document.getElementById('stage2').style.visibility='visible';
     }

    }

    //-->
    </script>

    </head>

    <body>
    <form name="doublecombo">
    <p><select id="example" name="example" size="1" onChange="Select(this.selectedIndex)">
    <option>Technology Sites</option>
    <option>News Sites</option>
    <option>Search Engines</option>
    </select>
    <select id="stage2" name="stage2" size="1" style="visibility:hidden;" >
    <option value="http://javascriptkit.com">JavaScript Kit</option>
    <option value="http://www.news.com">News.com</option>
    <option value="http://www.wired.com">Wired News</option>
    </select>
    <input type="button" name="test" value="Go!"
    onClick="go()">
    </p>

    </body>

    </html> 

  • #4
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Still confused

    I am still confused on how to use this code, but ADD other form elements to it. my form posts to a database, so when i add this code, it just stops working. Why is that? Can someone expalin it in an easy to understand way?


  •  

    Posting Permissions

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