show div based on drop down menu select option class

show div based on drop down menu select option class

by Akram kamal

HTML

<p>CSM Major:<span class="required">* </span>
    <br />
    <select name="majors_csm" id="majors_csm">
        <option>All</option>
        <option value="Biochemistry">Biochemistry</option>
        <option value="Biology">Biology</option>
        <option value="Chemistry, BA">Chemistry, BA</option>
        <option value="Chemistry, BS (ACS-Certified)">Chemistry, BS (ACS-Certified)</option>
        <option value="Computer Engineering, BS">Computer Engineering, BS</option>
        <option value="Computer Science, BA">Computer Science, BA</option>
        <option value="Computer Science, BS">Computer Science, BS</option>
        <option value="Electrical Engineering, BS">Electrical Engineering, BS</option>
        <option value="Engineering Physics, BS">Engineering Physics, BS</option>
        <option value="Environmental Science, BA">Environmental Science, BA</option>
        <option value="Environmental Science, BS">Environmental Science, BS</option>
        <option value="Information Technology">Information Technology</option>
        <option value="Mathematics, BS">Mathematics, BA</option>
        <option value="Mathematics, BS">Mathematics, BS</option>
        <option value="Undeclared">Undeclared</option>
    </select>
</p>


<p>Gender:</p>

<div class="div-pad-left div-pad-bottom">

    <fieldset>

        <legend class="sr-only">Gender</legend>

        <ul style="list-style:none; padding:0;" id="70" class="radio">
            <li>
                <input type="radio" name="gender" id="freeform_gender_1" value="Male" />&nbsp;&nbsp;
                <label for="freeform_gender_1">Male</label>
            </li>
            <li>
                <input type="radio" name="gender" id="freeform_gender_2" value="Female" />&nbsp;&nbsp;
                <label for="freeform_gender_2">Female</label>
            </li>
            <li>
                <input type="radio" name="gender" id="freeform_gender_3" value="Other" />&nbsp;&nbsp;
                <label...

CSS

.scholarships>* {
    display: none;
}

JavaScript

var divs = {
    "Biochemistry": ".kibel,.weinberg",
    "Biology": ".brann,.brehm,.kibel,.weinberg",
    "Chemistry, BA": ".brann,.brehm,.kibel,.weinberg",
    "Chemistry, BS (ACS-Certified)": ".brann,.brehm,.kibel,.weinberg",
    "Computer Engineering, BS": ".kibel,.weinberg",
    "Computer Science, BA": ".brehm,.kibel,.litton,.weinberg",
    "Computer Science, BS": ".brehm,.kibel,.litton,.weinberg",
    "Electrical Engineering, BS": ".kibel,.weinberg",
    "Engineering Physics, BS": ".kibel,.weinberg",
    "Environmental Science, BA": ".kibel,.weinberg",
    "Environmental Science, BS": ".kibel,.weinberg",
    "Information Technology": ".kibel,.weinberg",
    "Mathematics, BS": ".brann,.brehm,.kibel,.weinberg",
    "Physics": ".brann,.brehm,.kibel,.weinberg",
    "Undeclared": ".kibel,.weinberg"
}
var gender_divs = {
    "Male": ".brann,.brehm,.litton,.weinberg",
    "Female": ".brann,.brehm,.kibel,.litton,.weinberg",
    "Other": ".brann,.brehm,.litton,.weinberg"
}
$(function() {
    $("[name=majors_csm],[name=gender]").change(function() {
            var major = $("[name=majors_csm]").val()
            console.log(major)
            var gender = $("[name=gender]:checked").val()
            console.log(gender)

            $(".div-hidden").hide().filter(divs[major]).filter(gender_divs[gender]).show()
        }) //end majors

})