Transformar de Input type a Select cuando se pinche.

myconatani · #1 (**permalink**) 03/08/2004, 08:50

Estimados

Amigos,
Moderadores y/o Moderadoras. (tunait)
del Foro.

Mi consulta es la siguiente.

Tengo un Input Type con Onclick, y quiero que al pincharlo se puede transformar en Select de acuerdo a una lista y una vez seleccionado se pueda nuevamente transformarse en input type y que muestre en el input type lo que selecciono en el Select.

Si estoy pidiendo algo imposible por favor diganlo.
atte.
myconatani.

The_omars · #2 (**permalink**) 03/08/2004, 08:55

De echo no se pude cambiar el objeto, yo lo he intentado...

lo que puedes hacer es desaparecer el input y aparecer el otro

tunait · #3 (**permalink**) 03/08/2004, 09:34

A las buenas y santas....

Bueno, lo primero, decir que me parece una cosa absurda el hacer algo así.

Lo segundo.... lo que me he divertido haciendo algo tán absurdo!

jeje....

Prueba a ver si este ejemplo te sirve

Código:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
var opc = new Array('pepe','juan','perico')
function cambia(valor){
obj = document.createElement('select')
obj.id = 'pepe'
obj.onchange = function(){
	cambia2(this.value)
	}
obj.onblur = function(){
	cambia2(this.value)
	}
for(m=0; m<opc.length;m++){
	opt = document.createElement('option')
	opt.value = opc[m]
	opt.appendChild(document.createTextNode(opc[m]))
	if(valor == opc[m]){
		opt.selected = 'selected'
		}
	obj.appendChild(opt)
	}
document.body.replaceChild(obj,document.getElementById('pepe'))

}
function cambia2(valor){
obj = document.createElement('input')
obj.type = 'text'
obj.id = 'pepe'
obj.value = valor
obj.onclick = function(){
	cambia(this.value)
	}
document.body.replaceChild(obj,document.getElementById('pepe'))
}
</script>
</head>

<body>
<input name="pepe" type="text" id="pepe" onclick="cambia('')" />
</body>
</html>

A ver qué te parece

RicardoG · #4 (**permalink**) 03/02/2005, 16:00

Buen día Tunait,

Estuve probando el codigo de cambio del Input a Select que le enviaste a
myconatani por que estoy intentando crear select con el document.createElement('select') y no funciona, será que si se puede crear estos elementos de esta forma, les agradezco la ayuda, es urgente.

Cordialmente,

RicardoG

KarlanKas · #5 (**permalink**) 03/02/2005, 16:37

Jejeje! Genial, tunait! Genial! :)

JavierB · #6 (**permalink**) 05/02/2005, 05:24

Solo a la gran tunait se le hubiera ocurrido intentarlo

y solo ella podría haberlo conseguido

Saludos,

P.D. RicardoG: El código funciona bien. ¿Te da algún error?

caricatos · #7 (**permalink**) 05/02/2005, 06:37

Hola a todos:

Sin duda un buen script

.

¡Pero...!
No hubiera sido más fácil tener 2 capas alternándos con el estilo display none/inline...

Me gusta ver que se usa más el DOM, pero los viejos navegadores no se enterarían...
Hay otra cosa que también quiero comentar, es que también sería mejor añadir los eventos con addEventListener/attachEvent... recuerdo que mozilla no siempre implementa bien la forma de poner los eventos de esta guisa: unTag.onclick = function() {...}

tunait: Quise poner la cabecera como la de tu ejemplo en un documento php y me daba error...

... tal vez por el uso de la pareja "<?" ... "?>"
¡Enhorabuena

!

Saludos

VASS · #8 (**permalink**) 23/06/2009, 19:28

Este Foro es Genial....

Este post es un Poco Viejo, peor = Me salvo

Aca una Update a la Funcion para cambio de Text / Select

function CreaSelect(valor, id_){
var obj = document.createElement('select');
obj.id = id_;
obj.onchange = function(){CreaText(this.options[this.selectedIndex].text, this.id);alert(this.value)}
obj.onblur = function(){CreaText(this.options[this.selectedIndex].text, this.id);alert(this.value)}

var opt;
for(m=0; m<opc.length;m++){
obj.options[m]=(valor == opc[m])?new Option(opc[m],m,'defauldSelected'):new Option(opc[m],m);
}

document.body.replaceChild(obj,document.getElement ById(id_));
}

function CreaText(valor, id_){
var obj = document.createElement('input');
obj.type = 'text';
obj.id = id_;
obj.value = valor;
obj.onclick = function(){CreaSelect(this.value, this.id)}
document.body.replaceChild(obj,document.getElement ById(id_));
}

Solo la acorte un poco, pero hace lo mismo

Eso y Gracias de Nuevo