How to display a dropdown select based on the value of other dropdown select?

Question

Suppose I have a dropdown select option like below:

 <form>
    <select name="option" >
                <option value="">Select a Value:</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>

    </select>
</form>

When any user Selects the Option 1 I want to display the following dropdown select beside it instantly

 <select name="name" >
                <option value="">Select a person:</option>
                <option value="john">john</option>
                <option value="Micheal">Micheal</option>

    </select>

Or, if any user Selects the Option 2 I want to display the following dropdown select beside it instantly

 <select name="class" >
                <option value="">Select a person:</option>
                <option value="Class 1">Class 1</option>
                <option value="Class 2">Class 2</option>

    </select>

Would you please kindly show me how to do this? I am using Codeigniter.

The two possible select menus, are they dynamic or static? If static, the answers will do, otherwise I guess you have to write your own functions. But still take the answers as a point to start from — Dennis Hunink
– Dennis Hunink, Commented Nov 1, 2011 at 21:53
You can also use the cascadeFrom functionality. Here is an example of it. demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist — HereToLearn_
– HereToLearn_, Commented Jan 21, 2016 at 15:31

Naftali · Accepted Answer · 2011-11-01 21:48:55Z

2

$('select[name="option"]').change(function(){
    $('.hidden').hide();
    if(this.value == 1){
        $('select[name="name"]').toggle();
    }
    else if(this.value == 2){
        $('select[name="class"]').toggle();
    }
});

Fiddle: http://jsfiddle.net/maniator/Z6Upj/

answered Nov 1, 2011 at 21:48

Naftali

147k41 gold badges247 silver badges304 bronze badges

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

Comments

James Johnson · Accepted Answer · 2011-11-01 21:48:37Z

0

Give this a shot:

$(function(){
    $("select[name='option']").change(function(e){
        if ($(this).val() == "1")
            $("select[name='name']").show();
    });
});

answered Nov 1, 2011 at 21:48

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

Collectives™ on Stack Overflow

How to display a dropdown select based on the value of other dropdown select?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related