javascript
var countries=new Array();
countries[0]=new Array();
countries[0]['country']="";
countries[0]['cities']="";
countries[1]=new Array();
countries[1]['country']="United Kingdom";
countries[1]['cities']=['London','Manchester','Birmingham','Liverpool','Edinburgh','Cardiff','Belfast'];
countries[2]=new Array();
countries[2]['country']="United States";
countries[2]['cities']=['Washington DC','New York','Los Angeles', 'Chicago'];
countries[3]=new Array();
countries[3]['country']="Australia";
countries[3]['cities']=['Canberra','Melbourne','Sydney', 'Brisbane'];
countries[4]=new Array();
countries[4]['country']="Japan";
countries[4]['cities']=['Tokyo','Osaka','Fukuoka','Sendai','Sapporo'];
function fillBox2(box1,sel2) {
boxNo=(box1.id).substring((box1.id).length-1);
box2=document.getElementById(sel2+'_'+boxNo);
while (box2.childNodes[0]) {
box2.removeChild(box2.childNodes[0])
}
for (i=0; i<countries.length; i++) {
if (countries[i]['country']==box1.value) {
var cities=countries[i]['cities'];
}
}
for (i=1; i<cities.length; i++) {
var x=document.createElement('option');
var y=document.createTextNode(cities[i]);
x.appendChild(y);
box2.appendChild(x);
}
}
function buildBoxes(no,sel1,sel2) {
var theForm=document.getElementById('theForm');
for (j=0; j<no; j++) {
label1=document.createElement('label');
text1=document.createTextNode(sel1+' :');
label1.appendChild(text1);
box1=document.createElement('select');
box1.id=sel1+"_"+j;
z = document.createAttribute('name');
z.value = sel1+'[]';
box1.setAttributeNode(z);
label2=document.createElement('label');
text2=document.createTextNode(sel2+' :');
label2.appendChild(text2);
box2=document.createElement('select');
box2.id=sel2+"_"+j;
z = document.createAttribute('name');
z.value = sel2+'[]';
box2.setAttributeNode(z);
for (i=0; i<countries.length; i++) {
var x=document.createElement('option');
var y=document.createTextNode(countries[i]['country']);
x.appendChild(y);
box1.appendChild(x);
}
label1.appendChild(box1);
label2.appendChild(box2);
para=document.createElement('p');
para.appendChild(label1);
para.appendChild(label2);
theForm.appendChild(para);
fillBox2(box1,sel2);
box1.onchange=function() {
fillBox2(this,sel2);
}
}
}
window.onload=function() {buildBoxes(6,'country','city');}
HTML
<h1 id="chain_select_js_boxes">Chain select boxes (javascript)</h1>
<form id="theForm" method="post" action="#"></form>
When you submit it you can't get the values.
Des,
You were right. My fault. I've just added '[]' after the names of the city and country boxes, so now, you should be able to send an array of cities and an array of countries to your server-side processing page.
I haven't tested it, but I think it should be fine. Let me know if you have any problems.
Hi ! your "Contact" page seems to don't work, where could I send to you my question about this topic ?
Thanks
Namesake!!!