Three Select Boxes but when i choose 1st one next two will be change -HTML, JavaScript or jQuery

Question

If I choose Master Degree option from the first select box then in the second select box it will show only MBA/Finance and MBA/Marketing option and from the third select box it will show Bachelor Degree, Master Degree, and Doctorate Degree. Now If I choose Bachelor Degree option from the first select box then in the second select box it will show only BCJ/Law Enforcement and BCJ/Corrections option and from the third select box it will show all the options. I have done few codes but it’s not working.

<select id="degree">
<option value="default">Choose a degree</option>
<option value="Master">Master Degree</option>
<option value="Bachelor">Bachelor Degree</option>

<select id="program">
<option value="default">Choose  a program</option>
<option value="MBA/FN" Degree="Master">MBA/Finance</option>
<option value="MBA/MK" Degree="Master">MBA/Marketing</option>
<option value="BCJ/LE" Degree="Bachelor">BCJ/Law Enforcement</option>
    <option value="BCJ/COR" Degree="Bachelor">BCJ/Corrections</option>

<select id="level">
<option selected="selected" value="">Choose Highest level of Education</option>
    <option value="Less than 2 years of college">Less than 2 years of college</option>
    <option value="2 or more years of college">2 or more years of college</option>
    <option value="Associate Degree">Associate Degree</option>
    <option value="Bachelor Degree">Bachelor Degree</option>
    <option value="Master Degree">Master Degree</option>
    <option value="Doctorate Degree">Doctorate Degree</option>

Have you searched StackOverflow? This question, or comparable questions have been asked many times (dependent, linked or cascading drop downs), this may help http://stackoverflow.com/questions/5910281/jquery-dependent-drop-down-boxes-populate-how. Also, what have you tried so far? Where is your JavaScript? — thaJeztah, Mar 02 '13 at 11:28
Thanks for your reply. I have crate a file http://jsfiddle.net/Sheikh_musa/FptkX/1/ please check it I’m really need help just learning Jscript from different resources. Thanks — Sheikh Musa, Mar 02 '13 at 12:42

sasi · Accepted Answer · 2013-03-02T13:09:40.737

HTML

as per your select boxes ...

   <select id="degree">
<option value="default">Choose a degree</option>
<option value="Master">Master Degree</option>
<option value="Bachelor">Bachelor Degree</option>

<select id="program">
<option value="default">Choose  a program</option>

<optgroup class="level1">
<option class="level1" value="MBA/FN" Degree="Master">MBA/Finance</option>
<option class="level1" value="MBA/MK" Degree="Master">MBA/Marketing</option>
</optgroup>
<optgroup class="level2">
<option class="level2" value="BCJ/LE" Degree="Bachelor">BCJ/Law Enforcement</option>
<option class="level2" value="BCJ/COR" Degree="Bachelor">BCJ/Corrections</option>
</optgroup>
<select id="level">

<option selected="selected" value="">Choose Highest level of Education</option>
    <optgroup class="level3">
    <option class="level3" value="Less than 2 years of college">Less than 2 years of college</option>
    <option class="level3" value="2 or more years of college">2 or more years of college</option>
    </optgroup>
    <optgroup class="level1">
    <option class="level1" value="Associate Degree">Associate Degree</option>
    <option class="level1" value="Bachelor Degree">Bachelor Degree</option>
    </optgroup>
    <optgroup class="level2">
    <option class="level2" value="Master Degree">Master Degree</option>
    <option class="level2" value="Doctorate Degree">Doctorate Degree</option>
    </optgroup>

SCRIPT

   $('#degree').change(function () {
        if ($('#degree option:selected').text() == "Master"){
                $('.level1').css('display', 'block');
                $('.level2').css('display', 'none');
                $('.level3').css('display', 'none');
        } else if ($('#degree option:selected').text() == "Bachelor"){
                $('.level1').css('display', 'none');
                $('.level2').css('display', 'block');
                $('.level3').css('display', 'none');
        }  else {
                $('.level1').css('display', 'block');
                $('.level2').css('display', 'block');
                $('.level3').css('display', 'block');
        }});

Thanks for your reply. I have crate a file http://jsfiddle.net/Sheikh_musa/FptkX/1/ please check it I’m really need help just learning Jscript from different resources. Thanks — Sheikh Musa, Mar 02 '13 at 12:43
sasi can you please tell me which Jquery file i have to use for this please provide the link i will of course vote if its work. — Sheikh Musa, Mar 02 '13 at 12:53
see simply you can organize the options with option group and hide them on selection .. i will update better code and explain you how to do it.. — sasi, Mar 02 '13 at 13:03
i had updated the code..make your options as with class and display them as per your selection.....i dont know its best way or not.. — sasi, Mar 02 '13 at 13:11

Three Select Boxes but when i choose 1st one next two will be change -HTML, JavaScript or jQuery

1 Answers1