Welcome Guest, Not a member yet? Register   Sign In
form_dropdown()
#7

[eluser]Dave Stewart[/eluser]
You shouldn't really be hard-coding the select id into the function. It's far more flexible to pass a reference to the dropdown in the function call.

jQuery is also a good way to go, but you need to know a little JS to get to grips with it.

Bung this in your HTML page and see how you get on.

Code:
<script type="text/javascript">

    function updateDivs(select){
    
        // grab the div to be shown
            var selectedItem    = select.options[select.selectedIndex];
            var nextDiv            = document.getElementById(selectedItem.value);
            
        // has this function been run before? (this block will only run once per page load)
        // if not, the global variable "lastDiv" will be undefined, so instead, we're going to
        // choose last div to be the first option in the select
            if(window.lastDiv == undefined){
                var firstItem        = select.options[0];
                window.lastDiv        = document.getElementById(firstItem.value);
                }
            
        // hide the last div
            if(window.lastDiv != undefined){
                window.lastDiv.style.display = 'none';
                }
                
        // show the next div
            if(nextDiv != undefined){
                nextDiv.style.display = 'block';
                }
                
        // update a global variable to remember the last div that was shown
        // so it can be hidden when the next one is selected.

        // generally in OO frameworks, globals are not the best solution, but for a
        // quick and dirty solution, it will do here
            window.lastDiv = nextDiv;
        
        }

</script>

<div id="divs">
    <div id="first">Number 1</div>
    <div id="second" style="display:none">Number 2</div>
    <div id="third" style="display:none">Number 3</div>
</div>

&lt;form id="form1" name="form1" method="post" action=""&gt;
    &lt;select name="select" id="select" onchange="updateDivs(this)"&gt;
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third">third</option>
    </select>
&lt;/form&gt;

Cheers,
Dave


Messages In This Thread
form_dropdown() - by El Forum - 06-23-2008, 10:42 PM
form_dropdown() - by El Forum - 06-23-2008, 11:44 PM
form_dropdown() - by El Forum - 06-23-2008, 11:48 PM
form_dropdown() - by El Forum - 06-23-2008, 11:50 PM
form_dropdown() - by El Forum - 06-23-2008, 11:55 PM
form_dropdown() - by El Forum - 06-24-2008, 01:30 AM
form_dropdown() - by El Forum - 06-24-2008, 03:51 AM
form_dropdown() - by El Forum - 06-24-2008, 06:15 AM
form_dropdown() - by El Forum - 06-24-2008, 09:09 AM
form_dropdown() - by El Forum - 06-24-2008, 09:19 AM
form_dropdown() - by El Forum - 06-24-2008, 09:22 AM



Theme © iAndrew 2016 - Forum software by © MyBB