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:
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 >
|
Output: