reset drop down

Hi there,

i have two drop down menus.
what i want to do is when the user chooses an option from the first box, the second box returns to the default (selected) option on change.

Any thoughts are very welcome.
Thanks a lot.
[IMG]http://www.webdeveloper.com/forum/images/buttons/edit.gif[/IMG]

Lbruce

Newbie Poster

3 posts since Jul 2006

Reputation Points: 10

Solved Threads: 0

5 Years Ago

check out this ways:

call a function onchange of the first combo
where you will have to set the value of the second combo to the default value.
Say if the default value of the second combo is "default_value"
and the name of the function called on change of the first combo is fnOnChangeFirstCombo and the name of the second combo is SecCombo, then use the following code:
[code]
function fnOnChangeFirstCombo()
{
document.frmName.SecCombo.value="default_value";
}
[code]

anuradhu

Light Poster

29 posts since Apr 2006

Reputation Points: 12

Solved Threads: 2

5 Years Ago

document.frmName.SecCombo.value="default_value";

The above Is not standard or cross browser, you should use getElementById (elementid)

var combo = document.getElementById("combo2");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Combo change</title>
    <script type="text/javascript">
        function combo2_OnChange()
        {
            var combo = document.getElementById("combo2");
            combo.value = "0";
        }
    </script>
    <style type="text/css">
        body
        {
            font-family: verdana;
        }
        #fieldset1
        {
        padding: 15px; text-align: center; width: 150px;
        }
        #combo1
        {
            font-weight: bold;
            color: red;
        }
        #combo2
        {
            color: green;
        }
    </style>
</head>
<body>
    <fieldset id="fieldset1">
        <legend>Choose options</legend>
        
        <select id="combo1" onchange="combo2_OnChange();">
            <option selected="selected" value="0">Option 1</option>
            <option value="1">Option 2</option>
        </select>
        <hr />
        <select id="combo2">
            <option selected="selected" value="0">Default</option>
            <option value="1">First</option>
            <option value="2">Second</option>
            <option value="3">Third</option>
        </select>
    </fieldset>

</body>
</html>

hollystyles

Veteran Poster

1,182 posts since Feb 2005

Reputation Points: 262

Solved Threads: 68

This article has been dead for over three months

You