///////////// ARCHIVO HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Listas múltiples. Añadir y Borrar</title>
<script type="text/javascript" src="1.js"></script>
</head>
<body>
<form id="frutas" name="frutas">
<label for="misFrutas">Frutas favoritas</label>
<br/>
<select id="misFrutas" size="10" multiple="multiple" onclick="seleccionar()">
<option value="Manzana">Manzana</option>
<option value="Melón">Melón</option>
<option value="Pera">Pera</option>
<option value="Plátano">Plátano</option>
</select>
<br/>
<label for="nuevaFruta">Nombre de fruta a añadir</label>
<input type="text" id="nuevaFruta" name="nuevaFruta" size="50" value="Escriba aquí el nombre de la fruta a añadir" onclick="añadirFruta()" />
<br/>
<input type="radio" name="operacion" id="añadir" value="añadir" />
<label for ="añadir">Añadir elemento</label>
<input type="radio" name="operacion" id="borrar" value="borrar" />
<label for ="borrar">Borrar seleccionados</label>
<br/>
<button type="button" onclick="operar()">Ejecutar operación</button>
</form>
<p id="resultado"></p>
</body>
</html>
///////////// ARCHIVO JAVASCRIPT
function añadirFruta() {//se llama cuando el usuario hace un clic sobre la caja de texto o sobre la etiqueta asociada a la caja
//selecciona el contenido de la caja de texto
document.getElementById("nuevaFruta").select(); //activa directamente el botón de Añadir Fruta
document.getElementById("añadir").checked = true;}
function seleccionar() { //se llama cuando el usuario hace un clic sobre la lista de frutas o sobre la etiqueta asociada a la lista
//activa directamente el botón de Borrar frutas seleccionadas
document.getElementById("borrar").checked = true;}
function repetida() { var frutas = document.getElementById("misFrutas"); var nuevaFruta = document.getElementById("nuevaFruta").value; //comprobamos si existe en la lista la fruta a añdir
var i = 0;
while (i < frutas.length) { if (frutas[i].value.toLowerCase() == nuevaFruta.toLowerCase()) { return true;
}
i++;
}
return false;
}
function añadir() { var nuevaFruta = document.getElementById("nuevaFruta").value; var frutas = document.getElementById("misFrutas"); if (nuevaFruta == "") { alert("Se ha dejado en blanco el nombre de la fruta"); } else if(repetida()){ alert("La fruta introducida ya existe en la lista"); }else{ var option = document.createElement("option"); option.text = primeraMayuscula(nuevaFruta);
option.value = primeraMayuscula(nuevaFruta);
for(let i=0; i<frutas.length; i++){ var valorComprobar = frutas.options[i].value;
if(valorComprobar > option.value){ frutas.add(option, i);
break;
}
}
}
}
function seleccionado() { var frutas = document.getElementById("misFrutas"); //comprobamos que existe algún elemento seleccionado
var i = 0;
while (i < frutas.length) { if (frutas[i].selected) { return true;
}
i++;
}
return false;
}
function borrar() { var frutas = document.getElementById("misFrutas"); if (seleccionado()) { if (confirm("los elementos seleccionados van a ser borrados ¿está seguro de que desea borrarlos?")) { //recorremos los elementos de la lista
for(var i=frutas.length-1; i >= 0 ; i--){ frutas.remove(frutas.selectedIndex);
}
}else { alert ("No se ha seleccionado ningún elemento"); }
}
}
function operar() { //realiza la operación de añadir un elemento a la lista o de borrar los elementos de la lista que estén seleccionados
//comprobamos que botón de opción está seleccionado
if (document.frutas.añadir.checked) { //está seleccionado añadir
añadir();
} else { if (document.frutas.borrar.checked) { //está seleccionado borrar
borrar();
} else { //no está seleccionada ninguna de las opciones
alert("Debes seleccionar una de las dos opciones"); }
}
}
function primeraMayuscula(texto){ return texto.charAt(0).toUpperCase() + texto.slice(1).toLowerCase();
}
Crear cuenta
Comentarios sobre la versión: 1.0 (3)
Para solucionar este problema, añade debajo de la linea 80: