帶有下拉菜單的jQuery

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並隱藏其他DIV ？

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();
});

這是一個演示 。

Answer 3

如何像這樣 ？ 我為每個DIV添加了一個類，以便更容易一次顯示/隱藏所有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; }