顯示在下拉列表中選擇變化

Question

友多個div

我有一個下拉列表中選擇值 即

<div class="controls left-padded-controls"> 
<form:select id="selectField" class="input-medium" path=""> 
<option value="option1">Test flow1</option> 
<option value="option2">Test flow2</option> 
</form:select>  
</div> 

現在基於選擇上面的下拉選項，我有

<label class="control-label left-padded-control-label"><spring:message code="message.description"></spring:message>:&nbsp; 
</label> 
<div id="option1" class="box">Content 1</div> 
<div id="option2" class="box">Content 2</div> 
<br/> 

而且

<label class="control-label left-padded-control-label"><spring:message code="message.dynamic.audio.files"></spring:message>:&nbsp;    </label> 
<div id="option3" class="box">Content 3</div> 
<div id="option4" class="box">Content 4</div> 

現在基礎上下拉選項即testflow 1 我想顯示div ID爲「選項1」和「2選項」 和testflow2的選擇，我想顯示DIV ID =「選項2」和「3選項」

爲了實現上述我的jQuery代碼是

$(document).ready(function() { 
    $('.box').hide(); 
    $('#option1').show(); 
    $('#option2').show(); 
    $('#selectField').change(function() { 
     $('.box').hide(); 
     $('#'+$(this).val()).show(); 
    }); 
}); 

但預期它不能正常工作，請建議合適的變化，

非常感謝

Answer 1

$(document).ready(function() { 
    $('.box').hide(); 
    $('#option1').show(); 
    $('#option2').show(); 
    $('#selectField').change(function() { 
     $('.box').hide(); 
     var option = $(this).val(); 
     $('#'+option).show(); 
     $('#'+(option=="option1" ? "option3" : "option4")).show(); 
    }); 
}); 

jsFiddle example