Question

我正在尝试使用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';
}

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

Answer 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

Answer 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');
    });
});

显示/隐藏div取决于下拉选择

2 个答案: