How to enable and disable the dropdown values in jquery

Question

Here is script

$('#first').change(function(){

    switch ($(this).val())
    {
        case '1st':
            $('.1st').show();
            $('.2nd').hide();
            break;

        case '2nd':
            $('.1st').hide();
            $('.2nd').show();
            break;

        case '3rd':
            $('.3rd').hide();
            $('.3rd').show();
            break;

        case 'none':
            $('.1st').show();
            $('.2nd').show();
            break;
    }
});

http://jsfiddle.net/8ZVSu/3/

In first Dropdown, All, Edit, Delete, Modify is given. I need like this..

1. If I click All in first dropdown, it should display All,051,052,111,123,222,444,555,777,888,911,999 in second dropdown.

2. If I click Edit in first dropdown, it should display All,051,052,111,123,222,444,555,777,888,911,999 in second dropdown.

3. If I click Delete in first dropdown, it should display only All in second dropdown.

4. If I click Modify in first dropdown, it should display only All in second dropdown.

I am having few doubts here.

Answer 1

Demo In your context your first drop down value ,second drop down class has relation b/w each other .so using this.valueto get selected element

$('#first').change(function () {

    if (this.value == "none") {
        $("#second option").not(".2nd,.3rd").show();
    } else {
        $("#second option").hide();
        $("." + this.value).show();
    }


});

Answer 2

Try this :

$('#first').change(function(){
    $('#second option').hide(); // hide all options
    switch ($(this).val())
    {
        case '1st':
            $('.1st').show();
            break;

        case '2nd':
            $('.2nd').show();
            break;

        case '3rd':
            $('.3rd').show();
            break;

        case 'none':
           // show all options except for delete and modify
           $('#second option').not('.3rd, .2nd').show();
            break;
    }
});

Working JSFiddle

Answer 3

Two way：

1. you need 4 second select, show one of them when you change the first dropdown.

2. use js template generate the second dropdown dynamic.

You can't show or hide <option> direct in chrome.