javascript - 带有下拉菜单的 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并隐藏其他？

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

要隐藏除下拉菜单中选择的之外的所有其他DIVs，您可以将它们全部隐藏，然后只显示选择的那个：

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

这是一个演示。

Answer 3

这样的事情怎么样？我为每个类添加了一个类，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; }