Как отобразить выпадающий список на основе значения другого выпадающего списка?

Question

Предположим, у меня есть выпадающий список, как показано ниже:

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

    </select>
</form>

Когда какой-либо пользователь выбирает вариант 1, я хочу, чтобы рядом с ним мгновенно отображался следующий выпадающий список

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

    </select>

Или, если какой-либо пользователь выбирает вариант 2, я хочу отобразить следующее раскрывающееся меню рядом с ним

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

    </select>

Не могли бы вы показать мне, как это сделать? Я использую Codeigniter.

Answer 1

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

Скрипка: http://jsfiddle.net/maniator/Z6Upj/

Answer 2

Дайте этому шанс:

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