Form - Filter SELECT by 3 others

by PhilQ

HTML

<select name="child_1_courses">
  <option value="">Selecteer een cursus...</option>
  <option value="q1">Q1 [ax1]</option>
  <option value="q2">Q2 [ax2]</option>
  <option value="q3">Q3 [ay2]</option>
  <option value="q4">Q4 [ay3]</option>
  <option value="q5">Q5 [az1]</option>
  <option value="q6">Q6 [az3]</option>
</select>
<br />

<br />
Filter:
<select name="child_1_age" onchange="return updateCourses(this.name, '');">
  <option value="">Alle leeftijden</option>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>
<select name="child_1_cat" onchange="return updateCourses(this.name, '');">
  <option value="">Alle boten</option>
  <option value="x">X</option>
  <option value="y">Y</option>
  <option value="z">Z</option>
</select>
<select name="child_1_week" onchange="return updateCourses(this.name, '');">
  <option value="">Alle weken</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

JavaScript

function countProperties(obj) {
    var count = 0;
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            ++count;
    }
    return count;
}
var vcourses = {
    "q1": {
        "age": ["a","A"],
        "cat": ["x","X"],
        "week": ["1","w1"],
        "name": "Q1 [ax1]"
    },
    "q2": {
        "age": ["a","A"],
        "cat": ["x","X"],
        "week": ["2","w2"],
        "name": "Q2 [ax2]"
    },
    "q3": {
        "age": ["a","A"],
        "cat": ["y","Y"],
        "week": ["2","w2"],
        "name": "Q3 [ay2]"
    },
    "q4": {
        "age": ["a","A"],
        "cat": ["y","Y"],
        "week": ["3","w3"],
        "name": "Q4 [ay3]"
    },
    "q5": {
        "age": ["a","A"],
        "cat": ["z","Z"],
        "week": ["1","w1"],
        "name": "Q5 [az1]"
    },
    "q6": {
        "age": ["a","A"],
        "cat": ["z","Z"],
        "week": ["3","w3"],
        "name": "Q6 [az3]"
    }
};


function updateCourses(frm, def) {
    var n = frm.indexOf("_");
    if (n<0) {
        return false;
    }
    n = frm.indexOf("_", (n+1));
    if (n<0) {
        return false;
    }
    var childNR = frm.substr(0, (n+1));
    
    var cAge = $("select[name='"+childNR+"age']").val();
    var cCat = $("select[name='"+childNR+"cat']").val();
    var cWeek = $("select[name='"+childNR+"week']").val();
    
    var osCourses = {};
    
    $.each(vcourses, function(k, d) {
        if (
            (d.age[0]===cAge || cAge==="") &&
            (d.cat[0]===cCat || cCat==="") &&
            (d.week[0]===cWeek || cWeek==="")
        ) {
            osCourses[k] = d;
        }
    });
    
    $("select[name='"+childNR+"courses']").empty();
    
    if (countProperties(osCourses)==0) {
        $("select[name='"+childNR+"courses']").append(
            $('<option>').text("Er zijn helaas geen cursussen voor deze selectie..").val("")
        );
    } else {
        $("select[name='"+childNR+"courses']").append(
            $('<option>').text("Selecteer...