javascript - Problems passing select option values to function

Question

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?

Fiddle: http://jsfiddle.net/Nyh89/2/

JS

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 <= 1996) {
        $('.' + gen + '-under-twelve').show();
    } else if (age >= 1997 && age <= 2002) {
        $('.' + gen + '-mid').show();
    } else {
        $('.' + gen + '-over-sixteen').show();
    }
}

Answer 1

您的代码在您提供的小提琴中正常工作。

但是，我认为您的 HTML 中有一个错误：

<div class="female-under-twelve">Show male under 12 info</div>

您的 div 具有“女性”类，但文本显示“男性”。也许这就是为什么您将其视为错误的原因。