How click on combo data to show into another

**raihan** · 04-02-2013, 12:08 PM

Hi,

I have created few combo box with few data in those. Please check my site raihans.co.uk. and log in as: dbuser, pass: passwd. Then hover on User Log In/Out, click DB Test.

What I am looking is: say,
if I click on 'one' in Combo1, in 2nd Combo it will show like: 11, 12, 13, 14, 15;
or if I click on 'two' in Combo1, in 2nd Combo it will show like: 21, 22, 23, 24, 25;

again if I click on say, '12' in 2nd Combo, in 3rd Combo, it will show like: 111, 112, 113, 114 and so on.
I have tried in some way, but can't sort it out.

Pls, help me, how I can do this?

Thanking you in advance.

Raihan

**vwphillips** · 04-02-2013, 04:05 PM

Have a look at

Code:

<html>
<head>

<script type="text/javascript">

var categories = [];
categories["startList"] = ["Spain","France","Turkey","Greece"]
categories["Spain"] = ["Alicante","Barcelona","Malaga"];
categories["France"] = ["Paris","Nice","Lyon"];
categories["Turkey"] = ["Dalaman","Antalya","Bodrum"];
categories["Greece"] = ["Athens","Rhodes","Zante"];
categories["Alicante"] = ["Benidorm","El Abir","Finestra"];
categories["Barcelona"] = ["Lloret","Santa Suzanna","La Pineda"];
categories["Malaga"] = ["Puerto Banus","Fuengirola","Benalmadena"];
categories["Paris"] = ["Paris","Disneyland","Orly"];
categories["Nice"] = ["Nice","Monaco","Cannes"];
categories["Lyon"] = ["A","B","C"];
categories["Dalaman"] = ["A","B","C"];
categories["Antalya"] = ["d","e","f"];
categories["Bodrum"] = ["g","h","i"];
categories["Athens"] = ["1","2","3"];
categories["Rhodes"] = ["1a","2b","3c"];
categories["Zante"] = ["V","Y","A"];

var myarray = [];
myarray["startList2"] = ["Spain2","France2","Turkey2","Greece2"]
myarray["Spain2"] = ["Alicante2","Barcelona2","Malaga2"];
myarray["France2"] = ["Paris2","Nice2","Lyon2"];
myarray["Turkey2"] = ["Dalaman2","Antalya2","Bodrum2"];
myarray["Greece2"] = ["Athens2","Rhodes2","Zante2"];
myarray["Alicante2"] = ["Benidorm2","El Abir2","Finestra2"];
myarray["Barcelona2"] = ["Lloret2","Santa Suzanna2","La Pineda2"];
myarray["Malaga2"] = ["Puerto Banus2","Fuengirola2","Benalmadena2"];
myarray["Paris2"] = ["Paris2","Disneyland2","Orly2"];
myarray["Nice2"] = ["Nice2","Monaco2","Cannes2"];
myarray["Lyon2"] = ["A2","B2","C2"];
myarray["Dalaman2"] = ["A2","B2","C2"];
myarray["Antalya2"] = ["d2","e2","f2"];
myarray["Bodrum2"] = ["g2","h2","i2"];
myarray["Athens2"] = ["12","22","32"];
myarray["Rhodes2"] = ["1a2","2b2","3c2"];
myarray["Zante2"] = ["V2","Y2","A2"];


function fillSelect(sel,ary,nxt){
 if (ary&&sel.form){
  var frm=sel.form,nme=sel.name.replace(/\d/g,""),i=Number(sel.name.replace(/\D/g,""))+1,nxt=frm[nxt],opts=sel.options,oary=[],z0=nxt==sel?0:1,z1=0,z1a;
  while (frm[nme+i]){
   frm[nme+i].length=1;
   frm[nme+i].selectedIndex=0;
   i++;
  }
  for (;z0<opts.length;z0++){
   if (opts[z0].selected&&ary[opts[z0].value]){
    oary=oary.concat(ary[opts[z0].value]);
   }
  }
  if (nxt){
   for (;z1<oary.length;z1++){
    nxt.options[z1+1]=new Option(oary[z1],oary[z1]);
   }
   nxt.selectedIndex=0;
  }
 }
}

function getValue(isValue) {
 alert(isValue);
}

function init() {
 fillSelect(document.forms[0]['List1'],categories,'List1')
// fillSelect(document.forms[0]['sel1'],myarray,'sel1')
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>

<body>
<form action="">

<select name='List1' multiple="multiple" style="height:90px;" >
<option value="startList" selected>Select Country</option>
</select>
<input type="button" name="" value="Go"  onmouseup="fillSelect(this.form['List1'],categories,'List2')"/>

&nbsp;
<select name='List2' onchange="fillSelect(this,categories,'List3')">
<option selected>Select Airport</option>
</select>
&nbsp;
<select name='List3' onchange="getValue(this.value)">
<option selected >Select Resort</option>
</select>
<br />
<br />

<select name='sel1' onchange="fillSelect(this,myarray,'sel2')">
<option value="startList2" selected>Select Country</option>
</select>
&nbsp;
<select name='sel2' onchange="fillSelect(this,myarray,'sel3')">
<option selected>Select Airport</option>
</select>
&nbsp;
<select name='sel3' onchange="getValue(this.value)">
<option selected >Select Resort</option>
</select>
</form>

<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>

</body>
</html>

**raihan** · 04-03-2013, 11:42 AM

Hi vwphillips,
Thnx a lot for your reply. It's working with a bit modification as of my requirement. Could you please also help me about DBs, I will gratefull to you.

After your reply, I will post my problem. Thanking you again.

Raihan