CODEWITHSUNDEEP
javascripthtml
Rampill
Rampill

Reputation: 113

default selection option blank; implementing

I am planning on using this code:

html:

 <select id="myDropdown">      
     <option>Option 1</option>     
     <option>Option 2</option>     
     <option>Option 3</option>     
 </select>

and the javascript:

document.getElementById("myDropdown").selectedIndex = -1;

but I don't know how to implement this into my page.
This is how I currently have it.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
document.getElementById("myDropdown").selectedIndex = -1;
</script>
<title>Untitled Document</title>
</head>

<body>
    <select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
    </select> 
</body>
</html>

I want to make it so that there is a blank selection when they go on the page but they don't see an empty option. Why doesn't this work?

Upvotes: 2

Views: 125

Answers (1)

gdoron
gdoron

Reputation: 150313

Your script is in the <head>, it fires before the DOM is ready, move it to the bottom of the <body>

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>

    <body>
        <select id="myDropdown">      
            <option>Option 1</option>     
            <option>Option 2</option>     
            <option>Option 3</option>     
        </select> 
        <script language="javascript" type="text/javascript">
            document.getElementById("myDropdown").selectedIndex = -1;
        </script>
    </body>
</html>

Working demo

Upvotes: 2

Related Questions