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>

I need the DIV selected in the dropdown to show while hiding the other DIV's I also need to show DIV1 as the default DIV

This code seems to show the DIV’s in a stacked order. How do I only show the selected DIV and hide the others?

Answer 1

To show DIV1 as the default div, use the following:

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

To hide all other DIVs but the one chosen in the dropdown menu, you can hide them all, and then just show the one that was selected:

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

Here’s a DEMO.