Display one div if nothing is selected

Posted by Levani on Stack Overflow See other posts from Stack Overflow or by Levani
Published on 2010-05-29T13:39:07Z Indexed on 2010/05/29 13:42 UTC
Read the original article Hit count: 213

Filed under:

I use this javascript to display different div classes upon selection. I need to display one div class if nothing is selected, for example when page is loaded, and that replace it with one of the divs according to the selection...

<script type="text/javascript"><!--
    var lastDiv = "";
    function showDiv(divName) {
    // hide last div
    if (lastDiv) {
        document.getElementById(lastDiv).className = "hiddenDiv";
    }
    //if value of the box is not nothing and an object with that name exists, then change the class
    if (divName && document.getElementById(divName)) {
        document.getElementById(divName).className = "visibleDiv";
        lastDiv = divName;
    }
}
//-->
    </script>

css:

<style type="text/css" media="screen"><!--
    .hiddenDiv {
    display: none;
    }
    .visibleDiv {
    display: block;
    border: 1px grey solid;
    }

    --></style>

HTML:

<form id="FormName" action="blah.php" method="get" name="FormName">
        <select name="selectName" size="1" onChange="showDiv(this.value);">
            <option value="">Choose One...</option>
            <option value="one">first</option>
            <option value="two">second</option>
            <option value="three">third</option>
        </select>
    </form>
    <p id="one" class="hiddenDiv">This is paragraph 1.</p>
    <p id="two" class="hiddenDiv">This is paragraph 2.</p>
    <p id="three" class="hiddenDiv">This is paragraph 3.</p>

Can anyone please help?

© Stack Overflow or respective owner

Related posts about JavaScript