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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2002
    Posts
    144
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question More Dynamic Combo Box

    Hi Guy's,

    I don't often need to come to this forum but this bit of code has me beet!

    I am trying to create a form with 5 dynamic double combo boxes I have downloaded the following code from Javascriptkit and 1 combbox works just great. If I install 2 or more of the script the change will only take place in the first box. The script is as follows:-

    Code:
    <form name="doublecombo">
    <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
    <option>Product 1</option>
    <option>Product 2</option>
    <option>Product 3</option>
    </select>
    <select name="stage2" size="1">
    <option value="105.00></option>
    <option value="200.00"></option>
    <option value="300.00"></option>
    </select>
    
    
    <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("105.00")
    
    group[1][0]=new Option("200.00")
    
    group[2][0]=new Option("300.00")
    
    
    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>
    Can some kind person please help with changing the code as necessary.

    Regards,

    Dingbat

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    apart from that script being a little outdated, I think we need more information here - can you not post your html and a better description of what it is that you want to happen?

  • #3
    Regular Coder
    Join Date
    Oct 2002
    Posts
    144
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks for the swift reply.

    I am trying to create a form to populate a mysql database. It will not be visible to the net. The drop down select option are the same in 3 lines.

    What I am trying to achieve is that from the product name it will populate the price in the second box. I can rename the table fields in the database if I can get this working.

    I know that this is old code but it is only for internal use.. If the code is run on a server it will be clear what is happening. The code is as follows:-

    Code:
    <form name="doublecombo">
    <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
    <option>Product 1</option>
    <option>Product 2</option>
    <option>Product 3</option>
    </select>
    <select name="stage2" size="1">
    <option value="105.00></option>
    <option value="200.00"></option>
    <option value="300.00"></option>
    </select>
    
    
    <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("105.00")
    
    group[1][0]=new Option("200.00")
    
    group[2][0]=new Option("300.00")
    
    
    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 name="doublecombo">
    <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
    <option>Product 1</option>
    <option>Product 2</option>
    <option>Product 3</option>
    </select>
    <select name="stage2" size="1">
    <option value="105.00></option>
    <option value="200.00"></option>
    <option value="300.00"></option>
    </select>
    
    
    <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("105.00")
    
    group[1][0]=new Option("200.00")
    
    group[2][0]=new Option("300.00")
    
    
    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 name="doublecombo">
    <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
    <option>Product 1</option>
    <option>Product 2</option>
    <option>Product 3</option>
    </select>
    <select name="stage2" size="1">
    <option value="105.00></option>
    <option value="200.00"></option>
    <option value="300.00"></option>
    </select>
    
    
    <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("105.00")
    
    group[1][0]=new Option("200.00")
    
    group[2][0]=new Option("300.00")
    
    
    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>
    Regards,

    Dingbat

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    It could still be heavily improved and modernized, but the version below at least works. A couple of things of note:
    You can't use the same name for different functions - they just overwrite each other.
    You need closing tags on a <form> element - otherwise it is not recognized as such.
    The "this" keyword can be used to pass the form element to the function, thus cutting down on code multiplication.

    If all the stage 1 selects are to have the same values as are the stage 2 selects, the below should work. If they're all going to be different, it will need some tweaking...

    Code:
    <form>
    <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex, this.form)">
    <option>Product 1</option>
    <option>Product 2</option>
    <option>Product 3</option>
    </select>
    <select name="stage2" size="1">
    <option value="105.00></option>
    <option value="200.00"></option>
    <option value="300.00"></option>
    </select>
    </form>
    
    
    
    
    <form>
    <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex, this.form)">
    <option>Product 1</option>
    <option>Product 2</option>
    <option>Product 3</option>
    </select>
    <select name="stage2" size="1">
    <option value="105.00></option>
    <option value="200.00"></option>
    <option value="300.00"></option>
    </select>
    </form>
    
    <form>
    <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex, this.form)">
    <option>Product 1</option>
    <option>Product 2</option>
    <option>Product 3</option>
    </select>
    <select name="stage2" size="1">
    <option value="105.00"></option>
    <option value="200.00"></option>
    <option value="300.00"></option>
    </select>
    </form>
    <script>
    
    function redirect(x, frm){
    var groups=frm.example.options.length
    var group=new Array(groups)
    for (i=0; i<groups; i++)
    group[i]=new Array()
    
    group[0][0]=new Option("105.00")
    
    group[1][0]=new Option("200.00")
    
    group[2][0]=new Option("300.00")
    
    
    var temp=frm.stage2
    
    
    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 // this won't work as is, but do you need it?
    }
    //-->
    </script>
    </body>

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You can't create a combo box using a select. A select can only create a selection list.

    With HTML 5 you can create a combo box in HTML using an <input type="text"> and a <datalist>.

    For earlier versions of HTML you have to use an <input type="text"> and then attach a <ul> to it with JavaScript to get a combo box.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Regular Coder
    Join Date
    Oct 2002
    Posts
    144
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Hi Xelawho,

    Thanks for the updated code. That is just what I have been looking for.

    Many thanks.

    Regards,

    Dingbat


  •  

    Posting Permissions

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