Question

<style type="text/css">
#DIV1, #DIV2, #DIV3 { display:none; }
</style>

<script>
$(function() {
    $('#saleselect').change(function() {
        var val = $(this).val();
        if (val) {
            $('#DIV' + val).addClass("display:block;");
            $('#DIV' + val).slideDown();
        } else {
            $('#DIV' + val).addClass("display:none;");
        }
    });
});
</script>

<div style="position:absolute; z-index:1; right:140px; margin-top:-124px;">
<form>
<select id="saleselect" style="font-size:115%; padding:5px;">
  <option value="1">ONE</option>
  <option value="2">TWO</option>
  <option value="3">THREE</option>
</select>
</form>
</div>



<div id="DIV1">
<?php require "page1.php"; ?>
</div>

<div id="DIV2">
<?php require "page2.php"; ?>
</div>

<div id="DIV3">
<?php require "page3.php"; ?>
</div>

我需要在下拉菜单中选中DIV，同时隐藏其他DIV's，我还需要将DIV1显示为默认DIV

此代码似乎以堆叠顺序显示DIV。如何仅显示所选的DIV并隐藏其他{{1}}？

Answer 1

$(document).ready(function() {
    $('#DIV1').show();
});    

$('#saleselect').change(function() {
    var val = $(this).val();
    $('#DIV1:visible, #DIV2:visible, #DIV3:visible').hide();
    $('#DIV' + val).slideDown();
});

您不需要.addClass('display:block')，因为.slideDown()会这样做。

Answer 2

要将DIV1显示为默认div，请使用以下命令：

$(function() {
  $("#DIV1").show();
  // ...
});

要隐藏所有其他DIV但在下拉菜单中选择的那个，您可以隐藏它们全部，然后只显示所选的那个：

$('#saleselect').change(function() {
    var val = $(this).val();
    $("[id^=DIV]").hide();
    $("#DIV" + val).addClass("display:block;").slideDown();
});

这是 DEMO 。

Answer 3

this之类的内容怎么样？我为每个DIV添加了一个类，以便更容易一次显示/隐藏所有内容。

Answer 4

这可以帮助jsfiddle

$(function() {
$('#saleselect').change(function() {
    var val = $(this).val();
    if (val) {
        for (var i = 1; i < 4; i++) {
            if (val == i) {
                $('#DIV' + i).css("display", "block");
                $('#DIV' + i).slideDown();
            } else {
                $('#DIV' + i).css("display", "none");
            }
        }
    }
});
});

以及

#DIV1 {display: block;}
#DIV2, #DIV3 { display:none; }

带有下拉菜单的jQuery

4 个答案: