reset drop down

Expand Post »

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.
http://www.webdeveloper.com/forum/im...ttons/edit.gif

Similar Threads

Serial Number in Data Reports in Visual Basic 4 / 5 / 6
Msn and Hotmail Problems in Web Browsers
Overclocking 2600+.. help? in Motherboards, CPUs and RAM
PLEASE HELP: Windows XP Major problem in Windows NT / 2000 / XP
Time out web pages w/text or drop boxes in Networking

Lbruce

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

3 posts
since Jul 2006

Permalink

Aug 17th, 2006

Re: reset drop down

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

Reputation Points: 12

Solved Threads: 2

Light Poster

Offline

28 posts
since Apr 2006

Permalink

Aug 17th, 2006

Re: reset drop down

HTML and CSS Syntax (Toggle Plain Text)

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

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

HTML and CSS Syntax (Toggle Plain Text)

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

HTML and CSS Syntax (Toggle Plain Text)
<!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>
<!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>

Last edited by hollystyles; Aug 17th, 2006 at 4:36 pm.

hollystyles

Reputation Points: 262

Solved Threads: 68

Veteran Poster

Offline

1,181 posts
since Feb 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: CSS For Table

Next Thread in HTML and CSS Forum Timeline: How to generate pdf file automatically at background?

DaniWeb Message

Cancel Changes

User Name
Password