PDA

Click to See Complete Forum and Search --> : Populating List Box

mbevon
01-02-2003, 07:23 AM
How could i develp a script to chech the values in two combo boxes and fill a listBox?

thanks
khalidali63
01-02-2003, 07:37 AM
combo boxes and fill a listBox


As far as I know html has a select tag that is used inconjunction with the option tag?
Your question may be refereing to VB or Java GUI objects..
Please be a bit more descriptive.
mbevon
01-02-2003, 08:46 AM
HERE'S WHAT I'M, TRYING TO DO

</head>

<body>
<form name="form1" method="post" action="">
<select name="hc" id="hc">
<option value="bb">Barbados</option>
<option value="GD">Grenada</option>
<option value="ca">Canada</option>
</select>
<select name="sc" id="sc">
<option value="1">hs93</option>
<option value="2">sitc93</option>
<option value="3">hs96</option>
<option value="4">sitc96</option>
</select>
<script language="JavaScript" type="text/JavaScript">
if ( document.form1.hc.value="bb" && form1.sitc.value=1)
{
<select name="select" size="1" multiple>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>
else
{
<select name="select" size="1" multiple>
<option>1999</option>
<option>2000</option>
<option>2001</option>
</select>
}
if ( document.form1.hc.value="gd" && form1.sitc.value=1)
{
<select name="select" size="1" multiple>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
</select>
else
{
<select name="select" size="1" multiple>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
}
</script>
</form>
<p>&nbsp;</p></body>
</html>
mbevon
01-02-2003, 08:53 AM
HERE'S WHAT I'M, TRYING TO DO

</head>

<body>
<form name="form1" method="post" action="">
<select name="hc" id="hc">
<option value="bb">Barbados</option>
<option value="GD">Grenada</option>
<option value="ca">Canada</option>
</select>
<select name="sc" id="sc">
<option value="1">hs93</option>
<option value="2">sitc93</option>
<option value="3">hs96</option>
<option value="4">sitc96</option>
</select>
<script language="JavaScript" type="text/JavaScript">
if ( document.form1.hc.value="bb" && form1.sitc.value=1)
{
<select name="select" size="1" multiple>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>
else
{
<select name="select" size="1" multiple>
<option>1999</option>
<option>2000</option>
<option>2001</option>
</select>
}
if ( document.form1.hc.value="gd" && form1.sitc.value=1)
{
<select name="select" size="1" multiple>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
</select>
else
{
<select name="select" size="1" multiple>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
}
</script>
</form>
<p>&nbsp;</p></body>
</html>
khalidali63
01-02-2003, 11:04 AM
BTW I think what you need is create the first listbox on load,then when a user makes a selection from that list box another list box with info pertaining to the selection made in first List box will appear,and then a third list box appear when user makes a selection from the second one..but thats just me

below is the code. let me know
Khalid



<html>
<head>
<title>Solution for mbevon</title>
</head>

<body>
<form name="form1" method="post" action="">
<select name="hc" id="hc" onchange="processLists(1);" style="width:100pt;">
<option value="-1">List box A</option>
<option value="bb">Barbados</option>
<option value="gd">Grenada</option>
<option value="ca">Canada</option>
</select>
<select name="sc" id="sc" onchange="processLists(2);" style="width:100pt;">
<option value="-1">List box B</option>
<option value="1">hs93</option>
<option value="2">sitc93</option>
<option value="3">hs96</option>
<option value="4">sitc96</option>
</select>

</form>
<div id="newlist" style="position:absolute;"></div>
<script language="JavaScript" type="text/JavaScript">
var arrA = new Array();
var arrB = new Array();
function processLists(flag){
var listA = document.form1.hc;
var listB = document.form1.sc;
var newListStr = "";
var createOK = false;
if(flag==1){
arrA = getSelectedValues(listA);
}else if(flag==2){
arrB = getSelectedValues(listB);
}

if(arrA.length>0 && arrB.length>0){
newListStr +=createNewListBox(arrA,arrB);
createOK = true;
}
if(createOK){
var newlistObject = document.getElementById("newlist");
newlistObject.style.visibility = "visible";
newlistObject.innerHTML =newListStr;
createOK = false;
}
}

function createNewListBox(arrA,arrB){
var listbox="";
var range = new Array();
for(x=0;x<arrA.length;x++){
var val = arrA[x];
//alert("value ="+val);
switch (val){
case "bb":
range = getRange(arrB);
listbox += createListBox(range);
break;
case "gd":
range = getRange(arrB);
listbox += createListBox(range);
break;
case "ca":
range = getRange(arrB);
listbox += createListBox(range);
break;
}
}
return listbox;
}

function createListBox(range){
var start = parseInt(range[0]);
var end = (range.length>1)? parseInt(range[range.length-1]):start;
var str="<select name=\"newList\" style=\"width:100pt;\" onchange=\"processNewList();\">\n";
str +="<option value=\"-1\">List box C\n";
for(x=start;x<end+1;x++){
str +="<option value=\""+x+"\">"+x+"\n";
}
str+="</select>\n";
return str;
}

function getRange(arrB){
var temp = "";
for(n=0;n<arrB.length;n++){
if(arrB[n]=="1"){
temp = "1993 1994 1995";
break;
}else if(arrB[n]=="2"){
temp = "1996 1997 1998";
break;
}else if(arrB[n]=="3"){
temp = "1998 1999 2000 2001";
break;
}else if(arrB[n]=="4"){
temp = "1994 1995 1996 1997 1998";
break;
}
}
return temp.split(" ");
}
function getSelectedValues(list){
var len = list.length;
var ctr=0;
var values = new Array();
for(x=0;x<len;x++){
if(list[x].selected && list[x].value!="-1"){
values[ctr] = list[x].value;
ctr++;
}
}
return values;
}
</script>
</body>
</html>
mbevon
01-02-2003, 12:17 PM
Thanks for your response so far but i'm still having some problems

Firstly i would like listbox C to be a multi select list box
Secondly it not achieving my objective

each country has it's own year list hs/sitc93 or hs/sitc96

if i select BB in listA AND hs93 or sitc93 in listb i should get 1994,1995,1996,1997 in listc
else if i select BB in listA AND hs96 or sitc96 in listb i should get 1998,1999,2000

if i select CA in listA AND hs93 or sitc93 in listb i should get 1994,1995, in listc
else if i select CA in listA AND hs96 or sitc96 in listb i should get 1996,1997,1998,1999,2000

I'll appreciate you help
thanks again
khalidali63
01-02-2003, 12:52 PM
do you mean that hs93 and sitc93 will result in the same data?If so then in the list it should only display it like this
hs93/sitc93
hs96/sitc96
?
is th eabove correct?
mbevon
01-02-2003, 01:17 PM
I prefer them to be listed separate because they will be used in a query.
here is what i've done so far
check BB for hs93,hs96,sitc93,sitc96


<html>
<head>
<title>Solution for mbevon</title>
</head>

<body>
<form name="form1" method="post" action="">
<select name="hc" id="hc" onchange="processLists(1);" style="width:100pt;">
<option value="-1">List box A</option>
<option value="bb">Barbados</option>
<option value="gd">Grenada</option>
<option value="ca">Canada</option>
</select>
<select name="sc" id="sc" onchange="processLists(2);" style="width:100pt;">
<option value="-1">List box B</option>
<option value="1">hs93</option>
<option value="2">sitc93</option>
<option value="3">hs96</option>
<option value="4">sitc96</option>
</select>

</form>
<div id="newlist" style="position:absolute;"></div>
<script language="JavaScript" type="text/JavaScript">
var arrA = new Array();
var arrB = new Array();
function processLists(flag){
var listA = document.form1.hc;
var listB = document.form1.sc;
var newListStr = "";
var createOK = false;
if(flag==1){
arrA = getSelectedValues(listA);
}else if(flag==2){
arrB = getSelectedValues(listB);
}

if(arrA.length>0 && arrB.length>0){
newListStr +=createNewListBox(arrA,arrB);
createOK = true;
}
if(createOK){
var newlistObject = document.getElementById("newlist");
newlistObject.style.visibility = "visible";
newlistObject.innerHTML =newListStr;
createOK = false;
}
}

function createNewListBox(arrA,arrB){
var listbox="";
var range = new Array();
for(x=0;x<arrA.length;x++){
var val = arrA[x];
//alert("value ="+val);
switch (val){
case "bb":
range = getRange(arrB);
listbox += createListBox(range);
break;
case "gd":
range = getRange(arrB);
listbox += createListBox(range);
break;
case "ca":
range = getRange(arrB);
listbox += createListBox(range);
break;
}
}
return listbox;
}

function createListBox(range){
var start = parseInt(range[0]);
var end = (range.length>1)? parseInt(range[range.length-1]):start;
var str="<select name=\"newList\" multiple style=\"width:100pt;\" onchange=\"processNewList();\">\n";
str +="<option value=\"-1\">List box C\n";
for(x=start;x<end+1;x++){
str +="<option value=\""+x+"\">"+x+"\n";
}
str+="</select>\n";
return str;
}

function getRange(arrB){
var temp = "";
for(n=0;n<arrB.length;n++){
if(arrA[n]=="bb" && arrB[n]=="1" || arrB[n]=="2"){
temp = "1970 1995";
break;
}else if(arrA[n]=="bb" && arrB[n]=="3" || arrB[n]=="4"){
temp = "1996 2001";
break;
}else if(arrB[n]=="2"){
temp = "1996 1997 1998";
break;
}else if(arrB[n]=="3"){
temp = "1998 1999 2000 2001";
break;
}else if(arrB[n]=="4"){
temp = "1994 1995 1996 1997 1998";
break;
}
}
return temp.split(" ");
}
function getSelectedValues(list){
var len = list.length;
var ctr=0;
var values = new Array();
for(x=0;x<len;x++){
if(list[x].selected && list[x].value!="-1"){
values[ctr] = list[x].value;
ctr++;
}
}
return values;
}
</script>
</body>
</html>
khalidali63
01-02-2003, 01:27 PM
Can you post here or email me all three selections scenarios and their respective values?
k_ali@shaw.ca
khalidali63
01-02-2003, 05:56 PM
:-)
Just e-mailed you the updated solution

Khalid