Show/Hide element in dropdown depending another dropdown

I have 2 dropdown :

<select id="MainList">
    <option value="0">----</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
</select>

<select id="ChildList">
    <option value="0">----</option>
    <option value="5">E</option>
   开发者_JAVA技巧 <option value="6">F</option>
    <option value="7">G</option>
    <option value="8">H</option>
</select>

I'd like when I select the value "B" in the first dropdown hide or disable some values in the ChildList. Sample if : C in first hide or disable G in second, if D in first hide or disable G and H in second.

Thanks

you can try something like this..

use this code to get text of selected option-

var text = $("#MainList option:selected").text();

then use switch cases(like case0-hide D, case1-hide E), and to hide options in child list use this code-

 $("#ChildList option[value=valueYouNeedToHide]").attr('disabled','disabled');

To enable on of the option :

$("#ChildList option[value=valueYouNeedToShow]").removeAttr("disabled");

Hope this helps you at some extent..

In jQuery:

$('#MainList').change(function() {
    $('#ChildList option').removeAttr("disabled");

    if ($(this).val() == 3) {
        $('#ChildList option[value=7]').attr("disabled","disabled");
    }

    // etc..
});

Hope this works... in Chrome null works to un-disable things, but I'm not sure about other browsers.

Edit: Changed to removeAttr, much better. Thanks ChristopheCVB.