How to make a placeholder for a ‘select’ box?

There is no placeholder attribute in ‘select’ tag but it can make the placeholder for a ‘select’ box. There are many ways to create the placeholder for a ‘select’ box.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>make placeholder</title>
        <style>
            body {
                border:black;
                justify-content: center;
                text-align: center;
            }
            div {
                max-width: 18em;
            }
            h1 {
                color:green;
            }
            select {
                margin-left:130px;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks<h1>
        <div include="form-input-select()">
            <select required>
                <option value="">Example Placeholder</option>
                  
                <!-- Available Options -->
                <option value="1">GeeksforGeeks</option>
                <option value="2">w3skul</option>
                <option value="3">tuitorial point</option>
                <option value="4">CodeComunity</option>
                <option value="5">Coders</option>
                </select>
        </div>
    </body>
</html>                     

chevron_right


Output:
placeholder

Example 2: Using JavaScript to create placeholder in select box.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function populate(s, s1) {
                var s = document.getElementById(s);
                var s1 = document.getElementById(s1);
                s1.innerHTML = "";
                if(s.value == "Database") {
                    var arr = ["|Select","mysql|MySQL","oracale|Oracale"];
                }
                for(var option in arr) {
                    var pair = arr[option].split("|");
                    var new_op = document.createElement("option");
                    new_op.value = pair[0];
                    new_op.innerHTML = pair[1];
                    s1.options.add(new_op);
                }
            }
        </script>
        <style>
            body {
                text-align:center;
            }
            h1 {
                color:green;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>Choose Subject:</h2>
        <select id = "slct" name = "slct"
            onchange = "populate(this.id, 'slct1')">
            <option value="">Select</option>
            <option value="Database">Database</option>
            <option value="Java">Java</option>
            <option value="Python">Python</option>
        </select>
        <h2>Choose topics:</h2>
        <select id = "slct1" name = "slct1"></select>
    </body>
</html>                                        

chevron_right


Output:
placeholder



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.