HTML and CSS

reset drop down

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2006

Posts: 3

Reputation: Lbruce is an unknown quantity at this point

Solved Threads: 0

Lbruce

Offline

Newbie Poster

reset drop down

Aug 15th, 2006

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

•

Join Date: Apr 2006

Posts: 28

Reputation: anuradhu is an unknown quantity at this point

Solved Threads: 2

anuradhu

Offline

Light Poster

Re: reset drop down

Aug 17th, 2006

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]

•

Join Date: Feb 2005

Posts: 1,181

Reputation: hollystyles will become famous soon enough

Solved Threads: 67

hollystyles hollystyles is offline

Offline

Veteran Poster

Re: reset drop down

Aug 17th, 2006

Help with Code Tags

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)

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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

 Help with Code Tags 
 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>