...

View Full Version : Dynamic select boxes



janne67
12-06-2004, 02:50 PM
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!




//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=0; i<englishName.length; i++)
{
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=0; i<chineseName.length; i++)
{
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=0; i<pointNumber.length; i++)
{
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=0; i<chineseName.length; i++)
{
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=0; i<pointNumber.length; i++)
{
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>

Badman3k
12-06-2004, 07:07 PM
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 ;)



<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 :thumbsup:

janne67
12-07-2004, 10:07 AM
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.

Badman3k
12-07-2004, 12:29 PM
Okay i've modified it so that javascript enters all the options manually, rather than changing the current text/values.



<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 :thumbsup:

Badman3k
12-07-2004, 01:40 PM
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 :thumbsup:



<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>

janne67
12-08-2004, 12:40 PM
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!!!!!

janne67
12-09-2004, 07:13 AM
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

Willy Duitt
12-09-2004, 05:02 PM
sort(function(a,b){return a-b});



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum