Member Avatar for Lbruce

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]

  • 3 Contributors
  • 2 Replies
  • 152 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by hollystyles
Member Avatar for anuradhu

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:

function fnOnChangeFirstCombo()
{
   document.frmName.SecCombo.value="default_value";
}
Edited by Dani because: Fixed formatting
Member Avatar for hollystyles 
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>
        <br />
        <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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.