Foros del Web » Programación web » Javascript »

Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con javascript???

Estas en el tema de Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con javascript??? en el foro de Javascript en Foros del Web. Hola todo el mundo mi consulta es la siguiente como yo puedo desde JavaScript agregar, eliminar, cambiar el valor o saber el valor de una ...
  #1 (permalink)  
Antiguo 17/10/2006, 14:33
 
Fecha de Ingreso: marzo-2003
Mensajes: 510
Antigüedad: 11 años, 9 meses
Puntos: 2
Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con javascript???

Hola todo el mundo mi consulta es la siguiente como yo puedo desde JavaScript agregar, eliminar, cambiar el valor o saber el valor de una opción de un Select (comboBox) mediante javaScript solo me gustaría saber los comando muchas gracias

Última edición por KarlanKas; 17/10/2006 a las 15:36 Razón: No pongas tu firma dentro del cuerpo del mensaje
  #2 (permalink)  
Antiguo 17/10/2006, 15:30
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.986
Antigüedad: 13 años
Puntos: 58


Para crear una nueva opción:

variable=new Option("texto","valor");

Ahora tenemos que añadirla al select. SUpongamos este formulario:

<form name="pepote">
<select name="juan">
<option value="cosas">costillas</option>
</select>
</form>

para poder añadir una opción al select debemos antes poder referirnos al select. Para eso seguimos el proceso típico de javascript de ir de más a menos:

document.forms['pepote'].elements['juan']

para no estar poniendo esta retahila continuamente lo podemos meter en una variable:

cosa=document.forms['pepote'].elements['juan'];

Tenemos la nueva opción y tenemos el select. Ahora tenemos que decir en qué posición queremos añadir la nueva opción.

Si queremos sustituir la primera opción por la nueva sería fácil:

cosa.options[0]=variable;

Pero si queremos añadir la opción a las ya existentes tendríamos que poner esa opción como última, pero ¿cómo saber el número de options tiene el select?

Lo podemos saber así:

total = cosa.options.length;

este total en nuestro ejemplo sería 1 ya que sólo hay una opción, pero hay que tener en cuenta que javascript comienza a contar por el cero, por eso el número que nos da nos sirve como cardinal de la nueva opción. Así podemos poner:

cosa.options[cosa.options.length]=variable;

o lo que es lo mismo:

cosa.options[total]=variable;

Y para eliminar la opción sólo tenemos que hacer lo siguiente:

cosa.options[0]=null;

Espero haberte ayudado!
__________________
Cómo escribir|Economia Finanzas Peru
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #3 (permalink)  
Antiguo 26/10/2006, 16:44
 
Fecha de Ingreso: marzo-2003
Mensajes: 510
Antigüedad: 11 años, 9 meses
Puntos: 2
Demaciadas gracias KarlanKas fue demasiada buena tu respuesta te lo agradesco de corazon, resulto altiro lo que me explicaste al aplicarlo a mi pagina web de nuevo muchas gracias
  #4 (permalink)  
Antiguo 27/10/2006, 03:13
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.986
Antigüedad: 13 años
Puntos: 58
Me alegro de que te sirviera, Escorpión! Para eso estamos.
__________________
Cómo escribir|Economia Finanzas Peru
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #5 (permalink)  
Antiguo 08/06/2008, 11:04
 
Fecha de Ingreso: abril-2008
Mensajes: 16
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con jav

a mi tambieeeeen ma servido!! ^^ graciasss! jejeje
  #6 (permalink)  
Antiguo 08/06/2008, 11:12
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.986
Antigüedad: 13 años
Puntos: 58
Respuesta: Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con jav

De nadaa... :)
__________________
Cómo escribir|Economia Finanzas Peru
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #7 (permalink)  
Antiguo 21/06/2008, 00:58
 
Fecha de Ingreso: junio-2008
Mensajes: 12
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con jav

Buenas, buen instructivo y es algo similar a lo que necesito.

mira mi codigo mas abajo
(funciona) pero lo que necesito es hacerlo dinamico del todo. para esto quiero ahora lograr. utilizando un "onclick" en el BODY, poder pasar como parametro un objeto o tan solo el "id" y "text" de la "TD" clickeada.

Para esto escuche que existe un metodo llamado algo asi como busqueda burbuja ó burbujeante (nose bien, sino lo hubiera leido). Se basa en la gerarquia del documento y asi rastrear donde se hizo click, entonces segun sé, uno puede pasar como parametro de la funcion "this" para luego comparar si se hizo click en una TD y conocer su "id" y "text".

El problema que no encuentro que contenga valor cuando paso "this" y me lleva a pensar que no estoy pasando bien las cosas. y el metodo de rastrear se realiza al momento de pasar el valor (yo probé pasando --onclick= "PoblarLista(this)"--)...y creo que el metodo debe ser pasando "this.algo" o referenciando "document.algo y quien sabe que mas".

Mi consulta es consiza, solo quiero saber como llegar a hubicar los valores de donde se hace click y para esto que debo pasar como parametro.?? Busque pero nose de que manera buscar en google para llegar a algun ejemplo ó el titulo del tema.


Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Div 04</title>
</head>

<body onload="CreaLista();">

<div id="div04" descrip = Color de fondo style="display: block">

<table border="3" id="Tabla">
<tr style="color:blue"><th colspan="5"></th>Tabla de colores</tr>
	<tr>
		<td name="celda1" id="FF0000" text="Rojo" style="background-color:red" onClick="javascript:PoblarLista (this.id, this.text);">Rojo</td>
		<td id="0000FF" text="Azul" style="background-color:blue" onClick="javascript:PoblarLista (this.id, this.text);">Azul</td>
	<tr>
		<td id="009900" text="Verde" style="background-color:green" onClick="javascript:PoblarLista (this.id, this.text);">Verde</td>
		<td id="FFFF00" text="Amarillo" style="background-color:yellow" onClick="javascript:PoblarLista (this.id, this.text);">Amarillo</td>
	</tr>
</table>

<script language= "javascript">

function CreaLista ()
{
  oSelect = document.createElement('SELECT');
  oSelect.id = "combo";
  oSelect.name = "Colores";
  op = document.createElement("OPTION");	
  op.value = '99';
  op.value = 'FFFFFF';
  op.text = 'Seleccione un color del cuadro';
  op.selected = true;
  oSelect .options[0] = op;
  document.body.appendChild(oSelect);
  oSelect.attachEvent('onchange', function() {ColorFondo(combo);});
}

function PoblarLista (id, t)
{
  var cont=0;
  existe = 'NO';
  for(var i=0; i < oSelect.length; i++)
   {
	 if (id == combo[cont].value)
	 	{existe = 'Si';}
	 cont++;
	}
  if (existe == 'NO')
  {
  op = document.createElement("OPTION");
  op.value = id; 
  op.text = t;
  //op.selected = true;
  oSelect.options[cont] = op;
  document.body.appendChild(oSelect);
  }
}

function ColorFondo(c)
{
  document.bgColor = c.value;
}
</script> 
</div>

</body>
</html> 
  #8 (permalink)  
Antiguo 26/06/2008, 12:22
 
Fecha de Ingreso: marzo-2006
Mensajes: 1
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con jav

Excelente!!, Gracias KarlanKas.
  #9 (permalink)  
Antiguo 26/06/2008, 14:37
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.986
Antigüedad: 13 años
Puntos: 58
Respuesta: Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con jav

De nada!
__________________
Cómo escribir|Economia Finanzas Peru
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #10 (permalink)  
Antiguo 26/06/2008, 15:58
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.986
Antigüedad: 13 años
Puntos: 58
Respuesta: Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con jav

Así te serviría? Con tu permiso lo he cambiado para que funcione tb en Firefox...

Dime si va

Código:
<html>
<head>
	<title>Div 04</title>
<script language= "javascript">
window.onload=function(){
	CreaLista();
	var pepe=document.getElementsByTagName("TD");
	for(a=0;a<pepe.length;a++){
		pepe[a].onclick=poblarLista
	}
}
	
function poblarLista(){
		id=this.id;
		t=this.innerHTML;
  		var cont=0;
  		existe = 'NO';
  		for(var i=0; i < oSelect.length; i++){
			if (id == combo[cont].value){existe = 'Si';}
	 		cont++;
		}
  		if (existe == 'NO'){
  			op = document.createElement("OPTION");
  			op.value = id; 
  			op.text = t;
  //op.selected = true;
  oSelect.options[cont] = op;
  document.body.appendChild(oSelect);

}
}

function CreaLista ()
{
  oSelect = document.createElement('SELECT');
  oSelect.id = "combo";
  oSelect.name = "Colores";
  op = document.createElement("OPTION");	
  op.value = '99';
  op.value = 'FFFFFF';
  op.text = 'Seleccione un color del cuadro';
  op.selected = true;
  oSelect .options[0] = op;
  document.body.appendChild(oSelect);
  oSelect.onchange=function() {ColorFondo(combo);};
}


function ColorFondo(c)
{
  document.bgColor = c.value;
}
</script>

</head>

<body >

<div id="div04" descrip = Color de fondo style="display: block">

<table border="3" id="Tabla">
<tr style="color:blue"><th colspan="5"></th>Tabla de colores</tr>
	<tr>
		<td name="celda1" id="FF0000" text="Rojo" style="background-color:red" >Rojo</td>
		<td id="0000FF" text="Azul" style="background-color:blue" >Azul</td>
	<tr>
		<td id="009900" text="Verde" style="background-color:green" >Verde</td>
		<td id="FFFF00" text="Amarillo" style="background-color:yellow" >Amarillo</td>
	</tr>
</table>

 
</div>

</body>
</html>
Un saludo!
__________________
Cómo escribir|Economia Finanzas Peru
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #11 (permalink)  
Antiguo 04/07/2009, 18:44
 
Fecha de Ingreso: febrero-2008
Mensajes: 4
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con jav

Hola!!! he intentado utilizar tu código para agregar items a un listbox, pero cuando corro mi aplicación (visual basic .net 2005) me dice que el elemento no acepta esa propiedad o método. se refiere al listbox.option
sabes porque es eso??
Gracias de antemano!!
  #12 (permalink)  
Antiguo 16/09/2009, 15:49
 
Fecha de Ingreso: septiembre-2009
Mensajes: 124
Antigüedad: 5 años, 3 meses
Puntos: 3
Respuesta: Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con jav

Muchas gracias muchachos,

Me sirvio de mucho! :)

Saludos!
  #13 (permalink)  
Antiguo 28/01/2010, 14:08
 
Fecha de Ingreso: enero-2010
Mensajes: 1
Antigüedad: 4 años, 10 meses
Puntos: 0
Respuesta: Como puedo agregar y eliminar opciones dentro de un SELECT de HTML con jav

Hey, q tal...

Tengo este ejemplo q no me ha funcionado bien... ojalÀ me puedan ayudar
La idea es, q al elegir un valor de las opciones de "carrera" me despliegue solo ciertos valores para el segundo select
Gracias de antemano

Código HTML:
<html> 
	<head> 
	  <script language="JavaScript"> 
	   function elige(form) {
		  data = document.forms['frm'].elements['opcion'];
		  v = document.frm.carrera;
		  if(v == "B") {
			variable=new Option("opcion_B1","B1");
			data.options[0]=variable;			
		  }
		  else {
			variable=new Option("opcion_N1","N1");
			data.options[0]=variable;			
		  }
	   } 
	   
	  </script> 
	</head> 
 
	<body onload="cambia(document.frm.ciudad)"
		  onload="elige(document.frm.opcion)"> 
		<form name="frm"> 
			<table border="0"> 
                <tr>
                    <th scope="row"> Carrera: </th>
                    <td align="right"><select name="carrera" id="carrera" onkeyup="elige(this.form)">
                        <option value="A" selected> carrera1 </option>
                        <option value="B"> carrera2 </option>
                    </select></td>
                </tr>	
                <tr>
				<td>
					<select name="opcion">				
                    </select>
				</td>
			</table> 
		</form> 
	</body> 
</html> 
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 6 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 03:49.
SEO by vBSEO 3.3.2