0 
<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ですか?

4

4 に答える 4

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()。

于 2012-09-17T00:44:36.277 に答える
1

DIV1デフォルトとして表示divするには、次を使用します。

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

DIVドロップダウン メニューで選択したもの以外をすべて非表示にするには、それらをすべて非表示にしてから、選択したものだけを表示します。

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

ここにデモがあります。

于 2012-09-17T00:47:15.043 に答える
0

このようなものはどうですか？DIV一度にすべてを表示/非表示にしやすくするために、それぞれにクラスを追加しました。

于 2012-09-17T00:47:52.450 に答える
0

それは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; }
于 2012-09-17T00:51:42.533 に答える