如何使用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