No hay un atributo de marcador de posición en la etiqueta ‘seleccionar’, pero puede hacer el marcador de posición para un cuadro de ‘selección’. Hay muchas maneras de crear el marcador de posición para un cuadro de ‘selección’.
Ejemplo 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>
Producción:
Ejemplo 2: uso de JavaScript para crear un marcador de posición en el cuadro de selección.
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","oracle|Oracle"];
}
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA