- Joined
- Feb 11, 2012
- Messages
- 2
- Reaction score
- 0
I'm trying to make three dynamic dropdown selectors that depens on each other and I wounder how I can get (and set) the value on this selectors so that i can export it to a database with php . I'm really bad at javascript and would really need some help 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var categories = [];
categories["startList"] = ["Blekinge län", "Dalarnas län"];
categories["Blekinge län"] = ["Karlshamn","Karlskrona","Olofström","Ronneby","Sölvesborg"];
categories["Karlshamn"] = ["Karlshamn-Centrum"];
categories["Karlskrona"] = ["Karlshamn-Centrum"];
categories["Olofström"] = ["Karlshamn-Centrum"];
categories["Ronneby"] = ["Karlshamn-Centrum"];
categories["Dalarnas län"] = ["dalarna1","dalarna2"];
categories["dalarna1"] = ["dalarna1-Centrum"];
categories["dalarna2"] = ["dalarna2-west"];
var nLists = 3; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,"")),i;
for (i=step; i<nLists+1; i++) {
document.forms['dummyForm']['List'+i].length = 1;
document.forms['dummyForm']['List'+i].selectedIndex = 0;
}
var nOption,nData,nCat = categories[currCat];
for (each in nCat) {
nOption = document.createElement('option');
nData = typeof(nCat[each])=='string'?nCat[each]:nCat[each][0];
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(document.createTextNode(nData));
currList.appendChild(nOption);
}
}
function getValue(L3, L2, L1) {
var obj=document.getElementById("info"),s=L3.split(','),txt= L1 + "\n" + L2 + "\n" + L3,z0=1;
if (s.length>1){
txt='';
for (;z0<s.length;z0++){
txt+=s[z0]+'\n';
}
}
obj.innerHTML=txt
}
function init() {
fillSelect('startList',document.forms['dummyForm']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
</head>
<body>
<form name="dummyForm" action="">
<select name="List1" onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Välj län</option>
</select>
<br />
<select name="List2" onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Välj kommun</option>
</select>
<br />
<select name="List3" onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)" >
<option selected >Välj </option>
</select>
<div id="info">This is the default text</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var categories = [];
categories["startList"] = ["Blekinge län", "Dalarnas län"];
categories["Blekinge län"] = ["Karlshamn","Karlskrona","Olofström","Ronneby","Sölvesborg"];
categories["Karlshamn"] = ["Karlshamn-Centrum"];
categories["Karlskrona"] = ["Karlshamn-Centrum"];
categories["Olofström"] = ["Karlshamn-Centrum"];
categories["Ronneby"] = ["Karlshamn-Centrum"];
categories["Dalarnas län"] = ["dalarna1","dalarna2"];
categories["dalarna1"] = ["dalarna1-Centrum"];
categories["dalarna2"] = ["dalarna2-west"];
var nLists = 3; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,"")),i;
for (i=step; i<nLists+1; i++) {
document.forms['dummyForm']['List'+i].length = 1;
document.forms['dummyForm']['List'+i].selectedIndex = 0;
}
var nOption,nData,nCat = categories[currCat];
for (each in nCat) {
nOption = document.createElement('option');
nData = typeof(nCat[each])=='string'?nCat[each]:nCat[each][0];
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(document.createTextNode(nData));
currList.appendChild(nOption);
}
}
function getValue(L3, L2, L1) {
var obj=document.getElementById("info"),s=L3.split(','),txt= L1 + "\n" + L2 + "\n" + L3,z0=1;
if (s.length>1){
txt='';
for (;z0<s.length;z0++){
txt+=s[z0]+'\n';
}
}
obj.innerHTML=txt
}
function init() {
fillSelect('startList',document.forms['dummyForm']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
</head>
<body>
<form name="dummyForm" action="">
<select name="List1" onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Välj län</option>
</select>
<br />
<select name="List2" onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Välj kommun</option>
</select>
<br />
<select name="List3" onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)" >
<option selected >Välj </option>
</select>
<div id="info">This is the default text</div>
</form>
</body>
</html>