如何根據其他下拉選擇的值顯示下拉選擇？

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