listbox dinamico

ikyrhc · #1 (**permalink**) 21/09/2008, 23:18

Hola:
pues... pues... andando en este camino de la red, estube buscando la manera de hacer un listbox dinamico, que me permita agregar y seleccionar un valor adicional, espero darme a entender, supongamos, que tengo 3 valores en la lista, pero, si en esa lista no esta el valor que quiero, bueno pues, selecciono el valor de agregar uno nuevo y voila!!! se agrega, y seleccionado.

Espero sea de utilidad he aki el codigo:

Código HTML:

<html>
<head>
	<title>Lista Editable</title>
	<script language="javascript">
	//autor iky.rhc------------------------
	function ingresaValor()
	{
		var i=document.miFormulario.miLista.selectedIndex;
		var i2=document.miFormulario.miLista.length;		
		var value = document.miFormulario.miLista.options[i].text;
		if (value == "Nuevo_valor")
		{
			MiVariable=prompt("Ingresa valor nuevo");
			var ni2 = i2 + 1;
			document.miFormulario.miLista.length = ni2;
			document.miFormulario.miLista.options[i2].text = MiVariable;
			document.miFormulario.miLista.options[i2].value = MiVariable;
			document.miFormulario.miLista.options[i2].selected = true;
			document.miFormulario.miLista.focus();
			alert("valor agregado: " + MiVariable + " en la posicion: " + ni2);
		}
	}
	
	</script>
</head>

<body>
<div name="test">
<form name="miFormulario">
<table> 
	<tr>
		<td colspan="2">
		<h4>Selecciona un valor</h4>
		</td>
	</tr>
	<tr>
		<td>Valores en lista:</td>
		<td>
		<select name="miLista" style="width:150px" onChange="ingresaValor();">
			<option>Mi_trabajo</option>
			<option selected>Mi_novia</option>
			<option>mi_casa</option>
			<option>Nuevo_valor</option>		
		</select>
		</td>
	</tr>
</table>
</form>
</div>
</body>
</html>

anlhp · #2 (**permalink**) 22/09/2008, 03:21

bien amigo, te digo lo que hice para una de mis paginas, en ella tengo uno ( o los que quiera, pero en mi caso solo 2 ) dos <select />, pero ya lo puedes adaptar para convertirlo en listbox, eso es lo de menos, lo esencial es lo que te enseñare:

digamos que tenemos el elemento en mi pagina lo siguiente (esta ligado un poco con php pero no pasa nada, es para que captes la 'dinamicidad' ):

Código HTML:

...
<select name="films">
  <?php
  //pa no complicarte aqui tomo de una base de datos donde tenga por ejemplo
 //una lista de las pelis que tengo en mi biblioteca personal, y asi edite mi base
 //de datos a traves de la pagina o donde sea, esta seccion siempre se
 //acualizara sola mostrandome todas las pelis disponibles
  ?>
<!-- y aqui es donde hago mi magia porque aun no se bien como comunicar
       javascript y php, supon que queda asi la primera opcion -->

 <option value="1">Thunder Days</option>
...
</select>
...

...
<script type="text/javascript">
 function addFieldToList(){
 
 /*obtengo una matriz con todos mis 'select' y accedo al que me interesa
    de manera especifica*/
 var oList = document.getElementsByTagName('select')[0 o 1 o donde este];  

 var oListOption = document.createElement('option');
 oListOption.setAttribute('value', 'cualquier valor que quiera ke tenga');

 var oText = document.createTextNode('el texto que quieras de opcion');

 oListOption.appendChild(oText);
 oList.appendChild(oListOption);
 
}
...
</script>
...

y listo, aqui igual te dejo un escueto ejemplo funcional

Código HTML:

<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head>
<script type="text/javascript">

 function addFieldToList(){
 
var oList = document.getElementsByTagName('select')[0];  

 var oListOption = document.createElement('option');
 oListOption.setAttribute('value', 'cualquier valor que quiera ke tenga');
 
 var oText = document.createTextNode('dinamismo.com');

 oListOption.appendChild(oText);
 oList.appendChild(oListOption);
 
}
</script>
</head>

<body>
<a style="cursor: pointer" onclick="addFieldToList()">agregar</a>
<select name='bla'>
 <option value="1">blablabla</option>
</select>

</body>
</html>

espero que te sirva despues de haber dado tanta lata :P

moyao_84 · #3 (**permalink**) 11/11/2008, 23:02

yo tengo algo parecido pero implemetado con php por ci te sirve

Código:

$conn=Conectar();
	$sql="SELECT * FROM edo ORDER BY `id_edo` ASC";
	$result=mysql_query($sql,$conn);
	while($reg=mysql_fetch_array($result)){
		//tecnolgia DOM
		echo '
			<script>
				var objectList = document.getElementsByTagName("select")[0];
				var objetListOption = document.createElement("option");
 				objetListOption.setAttribute("value", "'.$reg['id_edo'].'");
				var objectText = document.createTextNode("'.$reg['edo'].'");
 				objetListOption.appendChild(objectText);
 				objectList.appendChild(objetListOption);
			</script>
		';

hay nos cuentan si les sirvio.. bye