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..

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.
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.
If I click Delete in first dropdown, it should display only All in second dropdown.
If I click Modify in first dropdown, it should display only All in second dropdown.

I am having few doubts here.

Yes used jquery only. But couldnt able to get the right one. Could you please help me with the code?> — UI_Dev
– UI_Dev, Commented Jun 17, 2014 at 7:06

Bhushan Kawadkar · Accepted Answer · 2014-06-17 07:21:41Z

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

edited Jun 17, 2014 at 7:21

answered Jun 17, 2014 at 7:08

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

UI_Dev Over a year ago

There is one problem here. If I click All in first dropdown, it is displaying All three times ..Can you please take a look?

Bhushan Kawadkar Over a year ago

This is because you have two more 'ALL' option at the bottom for class 2nd and 3rd. <option class="2nd" value="val13">All</option> <option class="3rd" value="val14">All</option>

UI_Dev Over a year ago

That was given for Delete and Modify in first dropdown..But getting three All options in first dropdown!

Bhushan Kawadkar Over a year ago

And if you don't wan to repeat 'ALL' for Delete and modify then use only one 'ALL' option and make it hide and show.

Bhushan Kawadkar Over a year ago

Ok, in that case you have to omit these two 'ALL'. see here jsfiddle.net/8ZVSu/7

|

Balachandran · Accepted Answer · 2014-06-17 07:47:07Z

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();
    }


});

edited Jun 17, 2014 at 7:47

answered Jun 17, 2014 at 7:15

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

3 Comments

UI_Dev Over a year ago

There is one problem here. If I click All in first dropdown, it is displaying All three times ..Can you please take a look?

UI_Dev Over a year ago

same problem remains balachandran :(

Balachandran Over a year ago

@user3107196. actualy i did'not understand what you were asked . now i updated my post pls check it

Robin · Accepted Answer · 2014-06-17 07:19:46Z

0

Two way：

you need 4 second select, show one of them when you change the first dropdown.
use js template generate the second dropdown dynamic.

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

edited Jun 17, 2014 at 7:19

answered Jun 17, 2014 at 7:14

Robin

6341 gold badge7 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to enable and disable the dropdown values in jquery

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related