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

Last Updated : 04 Aug, 2023

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:

html

<!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>

Output:

placeholder

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

html

<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript">
        function populate(s, s1) {
            let s = document.getElementById(s);
            let s1 = document.getElementById(s1);
            s1.innerHTML = "";
            if(s.value == "Database") {
                let arr = ["|Select","mysql|MySQL","oracle|Oracle"];
            }
            for(let option in arr) {
                let pair = arr[option].split("|");
                let 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>