<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript">
var gebiete = ["Geb a", "Geb b", "Geb c"];
var reedereien = ["Red a", "Red b", "Red c"];
var schiffe = [
{name: "Schiff a", reederei: 0, gebiete: [2]},
{name: "Schiff b", reederei: 1, gebiete: [0, 2]},
{name: "Schiff c", reederei: 2, gebiete: [1]}
];
function update(){
updateGeb();
updateRed();
updateSchiff();
}
function updateGeb(){
var schiff = selSchiff.options[selSchiff.selectedIndex].objectIndex;
var geb;
if (schiff){
geb = schiff.gebiete;
}
else {
var reederei = selRed.options[selRed.selectedIndex].objectIndex;
if (typeof reederei !== "undefined"){
var cschiffe = schiffe.filter(function(schiff){
return schiff.reederei === reederei;
});
geb = cschiffe.reduce(function(geb, schiff){
return geb.concat(schiff.gebiete);
}, []);
}
}
updateSel(selGeb, geb);
}
function updateRed(){
var schiff = selSchiff.options[selSchiff.selectedIndex].objectIndex;
var red;
if (schiff){
red = [schiff.reederei];
}
else {
var gebiet = selGeb.options[selGeb.selectedIndex].objectIndex;
if (typeof gebiet !== "undefined"){
var cschiffe = schiffe.filter(function(schiff){
return schiff.gebiete.indexOf(gebiet) !== -1;
});
red = cschiffe.map(function(schiff){
return schiff.reederei;
});
}
}
updateSel(selRed, red);
}
function updateSchiff(){
var reederei = selRed.options[selRed.selectedIndex].objectIndex;console.log(reederei);
var gebiet = selGeb.options[selGeb.selectedIndex].objectIndex;
var cschiffe = schiffe.filter(function(schiff){
return (typeof reederei === "undefined" || schiff.reederei === reederei) && (typeof gebiet === "undefined" || schiff.gebiete.indexOf(gebiet) !== -1);
});
updateSel(selSchiff, cschiffe);
}
function updateSel(sel, available){
Array.from(sel.options).forEach(function(option){
if (typeof option.objectIndex !== "undefined"){
option.disabled = available && available.length && available.indexOf(option.objectIndex) === -1;
option.style.display = option.disabled? "none": "";
}
});
}
var selGeb = document.createElement("select");
selGeb.appendChild(new Option());
gebiete.forEach(function(geb, i){
var option = new Option(geb, geb);
option.objectIndex = i;
selGeb.appendChild(option);
});
selGeb.addEventListener("change", update);
document.body.appendChild(selGeb);
var selRed = document.createElement("select");
selRed.appendChild(new Option());
reedereien.forEach(function(red, i){
var option = new Option(red, red);
option.objectIndex = i;
selRed.appendChild(option);
});
selRed.addEventListener("change", update);
document.body.appendChild(selRed);
var selSchiff = document.createElement("select");
selSchiff.appendChild(new Option());
schiffe.forEach(function(schiff, i){
var option = new Option(schiff.name, schiff.name);
option.objectIndex = schiff;
selSchiff.appendChild(option);
});
selSchiff.addEventListener("change", update);
document.body.appendChild(selSchiff);
</script>
</body>
</html>
