<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
select {
vertical-align: top;
}
</style>
</head>
<body>
<script type="text/javascript">
var oTempl = null;
function callServer(sQuery) {
var oXHR = new XMLHttpRequest();
oXHR.open("post", "response.php", true);
oXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
oXHR.onreadystatechange = function() {
if (this.readyState<4) return;
insertOptions(JSON.parse(this.responseText));
}
oXHR.send("context=getKommuner&"+sQuery);
}
function insertOptions(oResp) {
if (oResp.error) {
alert(oResp.error);
return;
}
var elmOpt, rows = oResp.rows,
elmSel = document.getElementById("kommuner");
while (elmSel.firstChild) elmSel.removeChild(elmSel.firstChild);
for (var i=0,j=rows.length; i<j; i++) {
elmOpt = oTempl.cloneNode(true);
elmOpt.firstChild.nodeValue = rows[i].kommune;
elmOpt.setAttribute("value", rows[i].id);
elmSel.appendChild(elmOpt);
}
elmSel.style.display = "inline";
}
function loadSelect() {
var elm = document.getElementById("regions"),
colOpts = elm.getElementsByTagName("option"),
sVarName = encodeURIComponent("select[]"),
aSelected = [], inx = 0;
for (var i=0,j=colOpts.length; i<j; i++) {
if (colOpts[i].selected) aSelected[inx++] = encodeURIComponent(colOpts[i].value);
}
if (inx==0) {
alert("Du skal vælge mindst én region.");
return;
}
callServer(sVarName+"="+aSelected.join("&"+sVarName+"="));
elm = document.getElementById("kommuner");
elm.style.display = "none";
if (!oTempl) {
oTempl = elm.getElementsByTagName("option")[0];
elm.removeChild(oTempl);
}
}
</script>
<div id="displ"></div>
<div>
<select id="regions" multiple="multiple">
<option value="1">Storkøbenhavn</option>
<option value="2">Nordsjælland</option>
<option value="3">Sjælland</option>
</select>
<select id="kommuner" style="display:none" multiple="multiple">
<option> </option>
</select>
</div>
<p>
<button onclick="loadSelect()">Load</button>
</p>
</body>
</html>
