根据下拉选择显示/隐藏 div答案

【问题标题】：Show/Hide div depending on dropdown select根据下拉选择显示/隐藏 div
【发布时间】：2014-03-15 01:47:02
【问题描述】：

我正在尝试使用 jQuery 显示一个 div，具体取决于从下拉列表中选择的内容。例如，如果用户从列表中选择“飞机”，我希望隐藏的 div 出现（#number_of_tickets_1）。如果用户选择汽车，则会出现不同的 div。希望这很清楚。下面是我的代码示例。

<script>
$(document).ready(function() {
   $('#number_of_tickets_1').hide();
   $('#travel_method_1').change(function() {
            alert($('#travel_method_1 option:selected').text());
            $('#number_of_tickets_1').show();
    });
});
</script>

上面的代码隐藏了 div 并在有人点击下拉列表时显示它。我也在那里添加了一个警报。但是，我想为每个选定的下拉选项显示一个特定的 div。类似于 Javascript 中的内容：

if(TRAVELMETHOD1.value == 'Airplane')
{
    NUMBEROFTICKETS1.style.display = 'block';
}       
else
{
    NUMBEROFTICKETS1.style.display = 'none';
}

希望这是有道理的。提前感谢您的帮助。

【问题讨论】：

$(document).ready(function () { $('#number_of_tickets_1').hide(); $('#travel_method_1').change(function () { alert($('#travel_method_1 option:selected').text()); $('#number_of_tickets_1').toggle(this.value == 'Airplane'); }); });
@Arun P Johny，非常感谢，进行了快速测试，看起来不错。
既然我已经完成了：codepen.io/anon/pen/DoHia
@threeFourOneSixOneThree，谢谢

标签： jquery

【解决方案1】：

您可以在选项中添加一个属性，其中您的 ID 或选择器指向您要显示的部分。像这样的：

$('#travel_method_1').change(function () {
    var selected = $('#travel_method_1 option:selected').data("relation-id");

    //Hide all other sections
    $(".sections").hide();

    if (selected) {
        $("#" + selected).show();
    }
});

html

<select id="travel_method_1">
    <option>Select one</option>
    <option data-relation-id="car">Car</option>
    <option data-relation-id="airplane">Airplane</option>
</select>
<div id="car" class="sections">car</div>
<div id="airplane" class="sections">airplane</div>

CSS

.sections {
    display: none;
}

Demo

【讨论】：

@Juan C，谢谢，这个例子也适合我。

【解决方案2】：

您可以使用change 处理程序，与.toggle() 类似

$(document).ready(function () {
    $('#number_of_tickets_1').hide();
    $('#travel_method_1').change(function () {
        alert($('#travel_method_1 option:selected').text());
        $('#number_of_tickets_1').toggle(this.value == 'Airplane');
    });
});

【讨论】：