/    Sign up×
Community /Pin to ProfileBookmark

three dynamic dropdown selectors

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>

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@WyCnetFeb 11.2012 — Hi there, nice script and alll.

Change the getValue() function to what is listed below and the script works. Ah dependencies in our world...
function getValue(L3, L2, L1) {

var CR=String.fromCharCode(10)+String.fromCharCode(12),obj=document.getElementById("info"),s=L3.split(',' ),txt= L1 + CR+ L2 + CR + L3,z0=1;

if (s.length>1){

txt='';

for (;z0<s.length;z0++){

txt+=s[z0]+CR;

}

}

obj.innerHTML=txt

}[/QUOTE]
Copy linkTweet thisAlerts:
@goldensebbeauthorFeb 13.2012 — thank you very much! when i add an php action to send it to an database I get testar.php?List1=Blekinge+l&#228;n&List2=Karlshamn&List3=Karlshamn-Centrum&submit=Skicka

do you know how to get it to testar.php?send ?
Copy linkTweet thisAlerts:
@WyCnetFeb 13.2012 — Only 2 additions are needed:
<body>

<form name="dummyForm" [B]action="testar.php" [/B]>

<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)[B] ;document.dummyForm.submit()" [/B]>

<option selected >Välj </option>

</select>

<div id="info">This is the default text</div>






</form>

</body>[/QUOTE]
×

Success!

Help @goldensebbe spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...