Problems passing select option values to function
<p>I have created 2 select boxes and want to display the appropriate div when each select box is occupied, so when age is selected a check is done to make sure gender has been selected before running the validate function which gets passed the gender and age values. My problem is however that when female gets passed it seems to be read as male but I cant understand why. Can anyone advise how I can resolve this?</p>

<p><strong>Fiddle:</strong> <a href="http://jsfiddle.net/Nyh89/2/" rel="nofollow">http://jsfiddle.net/Nyh89/2/</a></p>

<p><strong>JS</strong></p>

<pre><code>var genderList = $('#gender'),
    ageList = $('#age'),
    gender,
    age;

genderList.on('change', function () {
    gender = $(this).find(":selected").data('gender');

    if (ageList.val()) {
        console.log(gender);
        validate(age, gender);
    }

});

ageList.on('change', function () {
    age = $(this).find(":selected").data('year');

    if (genderList.val()) {
        console.log(gender);
        validate(age, gender);
    }
});


function validate(age, gender) {

    var gen = gender;

    if (age &lt;= 1996) {
        $('.' + gen + '-under-twelve').show();
    } else if (age &gt;= 1997 &amp;&amp; age &lt;= 2002) {
        $('.' + gen + '-mid').show();
    } else {
        $('.' + gen + '-over-sixteen').show();
    }
}
</code></pre>
