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 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic select boxes

    Hello
    I have three select boxes. I load each select box with an array. I have on array for each select box. Every index in the different arrays has its counterpart in the other two arrays. Now is my thougth that if i klick in the chinese_select the value in the english_select and number_select change to the valu that has the equal index. AND i should have the arrays sorted, the only array that is sorted is the english. But when i sort, let say the chinese array it¨s index doesn´t has its counter part in the other two, i must change the idex in the same way so de value inte three different arrays stay the same. Hope you know what i mean. Any one who could help me? Sorry for my bad english!

    PHP Code:

    //Javascript
    englishName[0] = "Abdomen Connecting Valley";
    englishName[1] = "Abdomen Knot";
    englishName[2] = "Abdomen Sorrow";

    chineseName[0] = "Futonggu";
    chineseName[1] = "Fujie";
    chineseName[2] = "Fuai";
    chineseName[3] = "Qishe";

    pointNumber[0] = "KID-20";
    pointNumber[1] = "SP-14";
    pointNumber[2] = "SP-16";
    pointNumber[3] = "ST-11";



    function 
    init()
    {
        
    //Engelska selecteboxen
        
    var engSel=document.getElementById('english_select');
        
    engSel.options.length englishName.length;
        
    alert(engSel.options.length);
        for(
    i=0i<englishName.lengthi++)
        {
            
    engSel.options[i].text englishName[i];
            
    engSel.options[i].value=englishName[i];
        }
            
        
    //Chinesiska selectboxen
        
    var chiSel=document.getElementById('chinese_select');
        
    chiSel.options.length chineseName.length;
        for(
    i=0i<chineseName.lengthi++)
        {
            
    chiSel.options[i].text chineseName[i];
            
    chiSel.options[i].value chineseName[i];
        }
        
        
    //Number selectboxen
        
    var nrSel=document.getElementById('number_select');
        
    nrSel.options.length pointNumber.length;
        for(
    i=0i<pointNumber.lengthi++)
        {
            
    nrSel.options[i].text pointNumber[i];
            
    nrSel.options[i].value pointNumber[i];
        }
    }


    function 
    sortArray(name)
    {
        
        if(
    name == "chineseName")
        {
            
    //alert("Kina");
            
    chineseName.sort();
            var 
    chiSel=document.getElementById('chinese_select');
            
    chiSel.options.length chineseName.length;
            for(
    i=0i<chineseName.lengthi++)
            {
                
    chiSel.options[i].text chineseName[i];
                
    chiSel.options[i].value chineseName[i];
            }
            
        }
        if(
    name == "pointNumber")
        {
            
            
    pointNumber.sort(compare);
            var 
    nrSel=document.getElementById('number_select');
            
    nrSel.options.length pointNumber.length;
            for(
    i=0i<pointNumber.lengthi++)
            {
                
    nrSel.options[i].text pointNumber[i];
                
    nrSel.options[i].value pointNumber[i];
            }
        }
        
    }




    //HTML
    <form name="sel">
            <
    select name="english_select">
                <
    option>--</option>
            </
    select>
            
                <
    select name="chinese_select" onFocus="sortArray('chineseName')">
                
                    <
    option>--</option>
                    
                </
    select>
            
            <
    select name="number_select" onFocus="sortArray('pointNumber')" >
            
                <
    option>--</option>
                
            </
    select>
        </
    form

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Right I've just spent the last 3 hours going over this, and I believe that I've managed to do everything that you wanted.
    The below will initialise the select fields to the original. Then when the user selects any of the fields it will sort the entries alphabetically A-Z, and update the others to copy. Then when the user selects the item they want, it will update the other fields to select the corresponding value.

    If you want to have a depth other than 3 then whenever the for loops use a three, use the size of the depth you want

    Code:
    <html>
    <head>
    <title>testing...</title>
    </head>
    <script language="JavaScript">
    <!--
    //Firstly lets have a single array with the details all contained in one.
    var name = new Array();
    name[0] = new Array("Abdomen Connecting Valley","Abdomen Knot","Abdomen Sorrow");
    name[1] = new Array("Futonggu","Fujie","Fuai");
    name[2] = new Array("KID-20","SP-14","SP-16");
    
    function init(){
    
    var engSel = document.getElementById('english_select');
    var chiSel = document.getElementById('chinese_select');
    var nrSel = document.getElementById('number_select');
    
    //Since we only have one array it's simple enough to determine which values should go where.
     for (i=0; i<3; i++){
    	engSel.options[i].text = name[0][i];
    	engSel.options[i].value = name[0][i];
    	chiSel.options[i].text = name[1][i];
    	chiSel.options[i].value = name[1][i];
    	nrSel.options[i].text = name[2][i];
    	nrSel.options[i].value = name[2][i];
     }
    }
    
    function update(what){
    
    var engSel = document.getElementById('english_select');
    var chiSel = document.getElementById('chinese_select');
    var nrSel = document.getElementById('number_select');
    
    //Lets get the selectedindex number and set all the selectedindexes to the same #.
    var i = what.selectedIndex;
    engSel.selectedIndex = i;
    chiSel.selectedIndex = i;
    nrSel.selectedIndex = i;
    
    }
    
    function sortArray(by){
    
    var engSel = document.getElementById('english_select');
    var chiSel = document.getElementById('chinese_select');
    var nrSel = document.getElementById('number_select');
    
    //Okay lets determine by what we are sorting.
    if (by.name == "english_select") k=0;
    if (by.name == "chinese_select") k=1;
    if (by.name == "number_select") k=2;
    
    for (i=by.options.length; i>=1; i--){
    	for (j=0; j<i; j++){
    		if (name[k][j] > name[k][j+1]){
    		//So the current comes after the following in the alphabet.
    		//So lets swap them.
    			temp = name[0][j+1];
    			name[0][j+1] = name[0][j];
    			name[0][j] = temp;
    
    			temp = name[1][j+1];
    			name[1][j+1] = name[1][j];
    			name[1][j] = temp;
    
    			temp = name[2][j+1];
    			name[2][j+1] = name[2][j];
    			name[2][j] = temp;
    		}
    	}
    }
    for (i=0; i<by.options.length; i++){
    //Now we'll just update the selection boxes.
    	engSel.options[i].text = name[0][i];
    	engSel.options[i].value = name[0][i];
    	chiSel.options[i].text = name[1][i];
    	chiSel.options[i].value = name[1][i];
    	nrSel.options[i].text = name[2][i];
    	nrSel.options[i].value = name[2][i];
    }
    
    }
    	
    //-->
    </script>
    
    <body onload="javascript:init()">
    
    <form name="sel">
            <select name="english_select" id="english_select" onChange="update(this)" 
    
    onFocus="sortArray(this)">
                <option>--</option>
                <option>--</option>
                <option>--</option>
            </select>
            
                <select name="chinese_select" onFocus="sortArray(this)" 
    
    id="chinese_select" onChange="update(this)">
                
                    <option>--</option>
                <option>--</option>
                <option>--</option>
                    
                </select>
            
            <select name="number_select" onFocus="sortArray(this)"  id="number_select" 
    
    onChange="update(this)">
            
                <option>--</option>
                <option>--</option>
                <option>--</option>
                
            </select>
        </form>  
    </body>
    </html>
    Hope this helps
    Last edited by Badman3k; 12-06-2004 at 07:09 PM.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #3
    New Coder
    Join Date
    Nov 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot! It seems to work, but must i have equal number of <options>--</options> in HTML that i have index in the array. Because my array is 397 places long so it will be a lot of <options>--</options>. If i dont have equal numbers of the i get an error.
    Last edited by janne67; 12-07-2004 at 11:28 AM.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Okay i've modified it so that javascript enters all the options manually, rather than changing the current text/values.

    Code:
    <html>
    <head>
    <title>testing...</title>
    </head>
    <script language="JavaScript">
    <!--
    //Firstly lets have a single array with the details all contained in one.
    var name = new Array();
    name[0] = new Array("Abdomen Connecting Valley","Abdomen Knot","Abdomen Sorrow");
    name[1] = new Array("Futonggu","Fujie","Fuai");
    name[2] = new Array("KID-20","SP-14","SP-16");
    
    function update(what){
    
    var engSel = document.getElementById('english_select');
    var chiSel = document.getElementById('chinese_select');
    var nrSel = document.getElementById('number_select');
    
    //Lets get the selectedindex number and set all the selectedindexes to the same #.
    var i = what.selectedIndex;
    engSel.selectedIndex = i;
    chiSel.selectedIndex = i;
    nrSel.selectedIndex = i;
    
    }
    
    function sortArray(by){
    
    var engSel = document.getElementById('english_select');
    var chiSel = document.getElementById('chinese_select');
    var nrSel = document.getElementById('number_select');
    
    //Okay lets determine by what we are sorting.
    if (by.name == "english_select") k=0;
    if (by.name == "chinese_select") k=1;
    if (by.name == "number_select") k=2;
    
    for (i=by.options.length; i>=1; i--){
    	for (j=0; j<i; j++){
    		if (name[k][j] > name[k][j+1]){
    		//So the current comes after the following in the alphabet.
    		//So lets swap them.
    			temp = name[0][j+1];
    			name[0][j+1] = name[0][j];
    			name[0][j] = temp;
    
    			temp = name[1][j+1];
    			name[1][j+1] = name[1][j];
    			name[1][j] = temp;
    
    			temp = name[2][j+1];
    			name[2][j+1] = name[2][j];
    			name[2][j] = temp;
    		}
    	}
    }
    for (i=0; i<by.options.length; i++){
    //Now we'll just update the selection boxes.
    	engSel.options[i].text = name[0][i];
    	engSel.options[i].value = name[0][i];
    	chiSel.options[i].text = name[1][i];
    	chiSel.options[i].value = name[1][i];
    	nrSel.options[i].text = name[2][i];
    	nrSel.options[i].value = name[2][i];
    }
    
    }
    	
    //-->
    </script>
    
    <body>
    <form name="sel">
    <select name="english_select" id="english_select" onChange="update(this)" onFocus="sortArray(this)">
    <script>
    for (i=0; i<3; i++){
    	document.write("<option value=\"" + name[0][i] + "\">" + name[0][i] + "</option>\n");
    	}
    </script>
    </select>
    <select name="chinese_select" id="chinese_select" onChange="update(this)" onFocus="sortArray(this)">
    <script>
    for (i=0; i<3; i++){
    	document.write("<option value=\"" + name[1][i] + "\">" + name[1][i] + "</option>\n");
    	}
    </script>
    </select>
    <select name="number_select" id="number_select" onChange="update(this)" onFocus="sortArray(this)">
    <script>
    for (i=0; i<3; i++){
    	document.write("<option value=\"" + name[2][i] + "\">" + name[2][i] + "</option>\n");
    	}
    </script>
    </select>
    </form>  
    </body>
    </html>
    This way all you have to do is change the array entries and the number 3 in the for loops
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    I've slightly modified the code so that all you have to do is add all the data to the array. The loops are controlled implicitly by the size of the array

    Code:
    <html>
    <head>
    <title>testing...</title>
    </head>
    <script language="JavaScript">
    <!--
    //Firstly lets have a single array with the details all contained in one.
    var name = new Array();
    name[0] = new Array("Abdomen Connecting Valley","Abdomen Knot","Abdomen Sorrow");
    name[1] = new Array("Futonggu","Fujie","Fuai");
    name[2] = new Array("KID-20","SP-14","SP-16");
    
    
    function update(what){
    
    var engSel = document.getElementById('english_select');
    var chiSel = document.getElementById('chinese_select');
    var nrSel = document.getElementById('number_select');
    
    //Lets get the selectedindex number and set all the selectedindexes to the same #.
    var i = what.selectedIndex;
    engSel.selectedIndex = i;
    chiSel.selectedIndex = i;
    nrSel.selectedIndex = i;
    
    }
    
    function sortArray(by){
    
    var engSel = document.getElementById('english_select');
    var chiSel = document.getElementById('chinese_select');
    var nrSel = document.getElementById('number_select');
    
    //Okay lets determine by what we are sorting.
    if (by.name == "english_select") k=0;
    if (by.name == "chinese_select") k=1;
    if (by.name == "number_select") k=2;
    
    for (i=by.options.length; i>=1; i--){
    	for (j=0; j<i; j++){
    		if (name[k][j] > name[k][j+1]){
    		//So the current comes after the following in the alphabet.
    		//So lets swap them.
    			temp = name[0][j+1];
    			name[0][j+1] = name[0][j];
    			name[0][j] = temp;
    
    			temp = name[1][j+1];
    			name[1][j+1] = name[1][j];
    			name[1][j] = temp;
    
    			temp = name[2][j+1];
    			name[2][j+1] = name[2][j];
    			name[2][j] = temp;
    		}
    	}
    }
    for (i=0; i<by.options.length; i++){
    //Now we'll just update the selection boxes.
    	engSel.options[i].text = name[0][i];
    	engSel.options[i].value = name[0][i];
    	chiSel.options[i].text = name[1][i];
    	chiSel.options[i].value = name[1][i];
    	nrSel.options[i].text = name[2][i];
    	nrSel.options[i].value = name[2][i];
    }
    
    }
    	
    //-->
    </script>
    
    <body>
    <form name="sel">
    <select name="english_select" id="english_select" onChange="update(this)" onFocus="sortArray(this)">
    <script>
    for (i=0; i<name.length; i++){
    	document.write("<option value=\"" + name[0][i] + "\">" + name[0][i] + "</option>\n");
    	}
    </script>
    </select>
    <select name="chinese_select" id="chinese_select" onChange="update(this)" onFocus="sortArray(this)">
    <script>
    for (i=0; i<name.length; i++){
    	document.write("<option value=\"" + name[1][i] + "\">" + name[1][i] + "</option>\n");
    	}
    </script>
    </select>
    <select name="number_select" id="number_select" onChange="update(this)" onFocus="sortArray(this)">
    <script>
    for (i=0; i<name.length; i++){
    	document.write("<option value=\"" + name[2][i] + "\">" + name[2][i] + "</option>\n");
    	}
    </script>
    </select>
    </form>  
    </body>
    </html>
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #6
    New Coder
    Join Date
    Nov 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think you missunderstod me a little bit, I dont have so many arrays. I have 398 strings in the array

    name[2] = new Array("KID-20","SP-14","SP-16",*,*,*,*,*,*,*,*,* ............)

    Thanks alot for the help it solved my problem!!!!!
    Last edited by janne67; 12-08-2004 at 12:47 PM.

  • #7
    New Coder
    Join Date
    Nov 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But i have one question more an it´s in the sorting of the array. When i sort the array it loks like this
    BL-1
    BL-10
    BL-11
    BL-12
    BL-13
    BL-14
    BL-15
    BL-16
    BL-17
    BL-18
    BL-19
    BL-2
    BL-20
    BL-21
    BL-22
    BL-23
    BL-24
    BL-25
    BL-26
    BL-27
    BL-28
    BL-29
    BL-3
    BL-30
    *
    *
    *
    Could i change the sorting so it sort´s like this
    BL-1
    BL-2
    BL-3
    *
    *
    *
    *
    *
    BL-10
    BL-11
    BL-12
    BL-13
    BL-14
    BL-15
    BL-16
    BL-17
    BL-18
    BL-19
    BL-20
    BL-21
    BL-22
    BL-23
    BL-24
    BL-25
    BL-26
    BL-27
    BL-28
    BL-29
    BL-30

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sort(function(a,b){return a-b});


  •  

    Posting Permissions

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