Creé un select con sus opciones usando js, porque necesitaba crearlo de esta manera para insertarlo en una web a través de un editor de js incorporado. Y aunque salió "bien", necesito que tenga una leyenda inicial, como un "placeholder", al cargar la página. Buscando, encontré que funciona muy bien tener una opción "hidden selected", que no permite ser seleccionada pero se muestra al cargar. ¿Cómo creo esa opción a través de JS? No se como darle esos atributos. Pongo en link de un codepen para que se vea mejor el código.
https://codepen.io/DKuper/pen/KKvxJyJ
Gracias!
let select = document.createElement("select");
select.id = "select";
select.setAttribute("onchange", "javascript:location.href = this.value;");
select.setAttribute("onfocus", "this.selectedIndex = -1;");
let option1 = document.createElement("option");
option1.id = "es";
option1.setAttribute("value", "https://goodline.com.ar/");
let option1Texto = document.createTextNode("Español");
option1.appendChild(option1Texto);
let option2 = document.createElement("option");
option2.id = "en";
option2.setAttribute("value", "https://goodline.com.ar/en/");
let option2Texto = document.createTextNode("English");
option2.appendChild(option2Texto);
select.appendChild(option1);
select.appendChild(option2);
let header = document.getElementById("Top_bar");
header.appendChild(select);
body {
background: rgb(5, 13, 66);
}
#Top_bar {
position: absolute;
left: 0;
width: 100%;
z-index: 30;
background-color: rgb(5, 13, 66);
height: 230px;
}
#select {
position: relative;
color: rgb(255, 255, 255);
background-color: rgb(5, 13, 66);
box-shadow: 0 10px 25px rgb(36, 46, 119);
appearance: none;
margin-top: 3px;
margin-left: 85%;
width: 85px;
z-index: 50;
}
#es {
background-color: rgb(62, 195, 216);
color: rgb(255, 255, 255);
}
#en {
background-color: rgb(62, 195, 216);
color: rgb(255, 255, 255);
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="lang.js"></script>
</head>
<body>
<div id="Top_bar"></div>
</body>
</html>