如何在 jquery 中使用其他 div 更改 div 内容？答案

【问题标题】：How to change div content with using other div in jquery?如何在 jquery 中使用其他 div 更改 div 内容？
【发布时间】：2014-03-14 16:56:35
【问题描述】：

我在更改 div 内容时遇到了问题。我的表单有一个区域选择框。选项是菲律宾和美国。逻辑是如果用户选择菲律宾。选择框下方的文本框将自动替换为也具有选择框的其他 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

    }

});

我的解决方案是为其创建隐藏和显示功能。或者有什么办法可以做到这一点？如您所见，标签 Region 下方有两个 div。第一个 div 用于文本框，第二个 div 用于选择框。

【问题讨论】：

标签： javascript jquery html css

【解决方案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

【讨论】：

感谢您的建议，我现在就试试。