Get value from dropdown javascript


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>
&nbsp;<br />
<select name="List2" onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Välj kommun</option>
</select>
&nbsp;
<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>
 
Ad

Advertisements

Joined
Jan 22, 2020
Messages
9
Reaction score
0
selectElement = document.querySelector('#select1');
output = selectElement.options[selectElement.selectedIndex].value;
document.querySelector('.output').textContent = output;
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads


Top