如何使用jquery中的其他div來更改div內容？

Question

我有更改div內容的問題。我的表單有一個區域選擇框。選項是菲律賓和美國。邏輯是如果用戶選擇菲律賓。 selecbox下面的文本框會自動替換爲具有選擇框的其他div。如果用戶選擇美國或沒有選擇，它將只顯示下面的文本框。默認情況下，選擇框下方有一個文本框。這是我的代碼。

<label style="font-weight: normal">Country</label> 
<select style="width: 250px" name="region_country" id="region_country"> 
    <option value="">--Select Country--</option> 
    <option value="Philippines">Philippines</option> 
    <option value="United States">United States</option> 
</select> 
<label style="font-weight: normal">Region</label><br /> 
<div id="region_selection_text"> 
    <input type="text" size="50" class="form-control" id="region" name="region" /> 
</div> 
<div id="region_selector_selection"> 
    <select class="form-control"> 
     <option></option> 
    </select> 
</div> 

在我的jQuery我有這個。

$("#region_country").on('change',function(){ 

    var region = $("#region_country").val(); 

    if(region == 'Philippines'){ 

     //display selectbox here 

    } else { 

     //display textbox here if no selection or if the selection is United States 

    } 

});  

我的解決方案是爲它創建一個隱藏和顯示功能。或者有什麼辦法可以做到這一點？如您所見，標籤區域下方有兩個div。第一個div用於文本框，第二個div用於選擇框。

Answer 1

您可以使用.toggle（）之類

var $rt = $('#region_selection_text'), 
    $rs = $('#region_selector_selection'); 
$("#region_country").on('change', function() { 
    var isP = this.value == 'Philippines' 
    $rt.toggle(!isP); 
    $rs.toggle(isP); 
}).change(); 

演示：Fiddle