Me gustaría saber ¿Cómo imito el funcionamiento de un ComboBox de Visual Basic en HTML?
<!DOCTYPE html>
<head>
<html lang="ES" >
<meta charset="UTF-8" >
<meta name="author" content="Pol Flórez Viciana" >
<meta name="owner" content="Pol Flórez Viciana" >
<meta name="keywords" content="Perfecto,Números,Calcular" >
<title>App Cambios de Base</title>
<meta name="description" content="Cambia de Base Simbólica con unos Clics." >
<meta name="robots" content="index, dofollow" >
<style>
body {
background-color: rgb(0,0,0); text-align: center;
}
h1 {
color: rgb(128,128,255); text-align: center; text-shadow: 0px 0px 25px green; margin: 0px;
}
h2 {
color: rgb(128,255,128); text-align: center; text-shadow: 0px 0px 25px white; margin: 0px;
}
h3 {
color: rgb(255,127,0); text-align: center; text-shadow: 0px 0px 25px white; margin: 0px;
}
p {
color: white; text-align: left;
}
a {
cursor: pointer;
background-color: rgb(64,64,255);
padding: 5px 5px 5px 5px;
border-radius: 25px;
color: yellow;
transition: all 0.8s linear;
border: 1px double white;
}
a:link { color: rgb(255,255,0); }
a:visited { color: rgb(255,255,128); }
a:hover { color: rgb(255,0,0); }
.MyInput {
cursor: pointer;
border-radius: 10px;
text-align: center; margin: 2px;
}
section {
vertical-align: text-top;
width: 92%; min-width: 420px; max-width: 960px; padding: 10px;
background-color: rgb(32,32,32);
border-radius: 25px;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
color: white;
}
#FechaInicioFechaFin{
position: fixed;
right: 5px;
bottom: 5px;
color: white;
}
#Pantalla1 {
display: inline-block;
}
#Pantalla2 {
display: none;
}
.Centrado{
vertical-align: top;
display: inline-block;
text-align: center;
}
.Izquierda{
vertical-align: top;
display: inline-block;
text-align: left;
}
.Derecha{
vertical-align: top;
display: inline-block;
text-align: right;
}
</style>
</head>
<body>
<center>
<h1>App Cambios de Base</h1>
<section id="Pantalla1">
<div class="Izquierda" style="width: 72%;" >
<input class="MyInput" type="button" id="BotonEjemplo" name="BotonEjemplo" onclick="Ir2()" value="Ejemplos" title="Ejemplos de Cambios de Base" />
</div>
<div class="Derecha" >
<input class="MyInput" type="button" id="BotonF0" name="BotonF0" onclick="Ir2()" value="Ayuda" style="background-color: red; color: white;" title="¿Necesitas Ayuda?" />
</div>
<center>
<h2>Introduzca el Número a Calcular</h2>
<br>
<label>Introduzca el valor para cambiarlo de base.</label>
<input type="text" id="ElInput" value="10" style="width: 160px;" />
<label>Introduzca el valor de base.</label>
<input type="text" id="LaBase" value="2" style="width: 50px;" />
<br><br>
<input type="button" id="ElButton1" class="MyInput" value="Calcular de Decimal a Base" onclick="Calcular()" />
<input type="button" id="ElButton2" class="MyInput" value="Calcular de Base a Decimal" onclick="CalcularInversa()" />
<br><br>
<label id="Resultado">Resultado.</label>
<br><br>
</center>
</section>
<section id="Pantalla2" class="Derecha" >
<input type="button" onclick="Ir1()" style="background-color: red; color: white;" value="X" />
<center>
<h2>Ayuda Para Calculos de Cambios de Base</h2>
<p>
Introduzca los valores de número y de base para calcular el cambio de base con este pequeño ejemplo de programación.<br>
<br>
Haz números mayores a los que maneja este aplicativo con los proyectos de calculadoras de Pol Power Calculator:<br>
</p>
<a href="https://dos-a-la-tres.com/aplicaciones-online.php#Pol-Power-Calculator-Web" >Pol Power Calculator Web.</a><br>
<br>
<a href="https://dos-a-la-tres.com/aplicaciones.php#Pol-Power-Calculator" >Pol Power Calculator Para Windows</a><br>
<br><br>
</center>
</section>
<footer id="FechaInicioFechaFin" ><a href="mailto:[email protected]">[email protected]</a> ~ 13/12/2024 - 13/12/2024</footer>
</center>
<script>
// Funciones Base de Todo Esto
function Calcular(){
var ElDato = parseFloat(document.getElementById("ElInput").value);
var LaBase = parseInt(document.getElementById("LaBase").value);
var Numero = parseInt(ElDato);
if (ElDato >= 0 && LaBase >= 0){
document.getElementById("Resultado").innerHTML = Numero.toString(LaBase);
}
}
function CalcularInversa(){
var ElDato = parseFloat(document.getElementById("ElInput").value);
var LaBase = parseInt(document.getElementById("LaBase").value);
var Numero = parseInt(ElDato);
if (ElDato >= 0 && LaBase >= 0){
document.getElementById("Resultado").innerHTML = parseInt(Numero, LaBase);
}
}
function Ir1(){
document.getElementById("Pantalla1").style = "display: inline-block;";
document.getElementById("Pantalla2").style = "display: none;";
}
function Ir2(){
document.getElementById("Pantalla1").style = "display: none;";
document.getElementById("Pantalla2").style = "display: inline-block;";
}
</script>
</body>
</html>
En este fragmento de código, me gustaría crearle un combobox en vez de un text en el que se pueda elegir entre diferentes opciones la Base de ese control ( LaBase ) que pueda ser de 2 3 4 5 6 8 10 16