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

Escorpion_Negro · #1 (**permalink**) 17/10/2006, 13:33

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

KarlanKas · #2 (**permalink**) 17/10/2006, 14:30

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!

Escorpion_Negro · #3 (**permalink**) 26/10/2006, 15:44

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

KarlanKas · #4 (**permalink**) 27/10/2006, 02:13

Me alegro de que te sirviera, Escorpión! Para eso estamos.

TikoAgar · #5 (**permalink**) 08/06/2008, 10:04

a mi tambieeeeen ma servido!! ^^ graciasss! jejeje

KarlanKas · #6 (**permalink**) 08/06/2008, 10:12

De nadaa... :)

MatiasDV · #7 (**permalink**) 20/06/2008, 23:58

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>

ana_ines · #8 (**permalink**) 26/06/2008, 11:22

Excelente!!, Gracias KarlanKas.

KarlanKas · #9 (**permalink**) 26/06/2008, 13:37

De nada!

KarlanKas · #10 (**permalink**) 26/06/2008, 14:58

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!

magaslcbl · #11 (**permalink**) 04/07/2009, 17:44

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!!

estefanosalazar · #12 (**permalink**) 16/09/2009, 14:49

Muchas gracias muchachos,

Me sirvio de mucho! :)

Saludos!

Mac_Net4 · #13 (**permalink**) 28/01/2010, 14:08

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>