Código de JavaScript - Insertar valores en un select de manera ordenada

Imágen de perfil
Val: 21
Ha disminuido 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Insertar valores en un select de manera ordenadagráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 16 de Enero del 2019 por Becku
916 visualizaciones desde el 16 de Enero del 2019
Código que va añadiendo valores a un select de manera ordenada, ingresando la primera letra siempre en mayúscula, y comprobando que no esta repetida.

insertar-valores-select

1.0
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 16 de Enero del 2019gráfica de visualizaciones de la versión: 1.0
917 visualizaciones desde el 16 de Enero del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
///////////// 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();
}



Comentarios sobre la versión: 1.0 (3)

Imágen de perfil
16 de Enero del 2019
estrellaestrellaestrellaestrellaestrella
Funciona muy bien!!!
Responder
Imágen de perfil
17 de Enero del 2019
estrellaestrellaestrellaestrellaestrella
Hola Becku, he encontrado un pequeño error en el código... Si añades una fruta que empieza por una letra superior al ultimo elemento, no lo añade.

Para solucionar este problema, añade debajo de la linea 80:
frutas.add(option);
Responder
joss
1 de Marzo del 2019
estrellaestrellaestrellaestrellaestrella
Muy bueno.
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5018