Posted By
Bajarangi soft ,
Posted On 09-10-2020
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:
<!DOCTYPE html>
<html>
<head>
<title>make placeholder</title>
<style>
body {
border:black;
justify-content: center;
text-align: center;
}
div {
max-width: 18em;
}
h1 {
color: #b211ec;
}
select {
margin-left:130px;
}
</style>
</head>
<body>
<h1>Bajarangi Soft<h1>
<div include="form-input-select()">
<select required>
<option value="">Example Placeholder</option>
<!-- Available Options -->
<option value="1">bajarangi soft for web designers</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>
<!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: #f61b07;
}
</style>
</head>
<body>
<h1>BAJARANGI SOFT</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">
<option value="">Select</option>
<option value="Database">Database</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
</select>
</body>
</html>