Cambiar select con input + boton y viceversa

flashtkd · #1 (**permalink**) 17/11/2009, 18:45

Como se puede hacer esto:

Hay un "select" con contenido "opcion 1","opcion 2","opcion 3","opcion 4" y "opcion 5" y se presiona el boton de al lado se oculta el "select" y aparece un "input" en el cual se agrega un contenido, al presionar denuevo el boton se oculta el "input" y aparece el "select" pero con el contenido ingresado del "Input"

en la imagen se ven todos los pasos con detalle.

quimfv · #2 (**permalink**) 18/11/2009, 05:54

A ver que te parece....

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript" type="text/JavaScript">
function fmostra(obj){
	if (obj.id=="botmostra"){
		document.getElementById("insertatxt").style.display="block";
		document.getElementById("insertasel").style.display="none";
	}else{
		document.getElementById("insertatxt").style.display="none";
		document.getElementById("insertasel").style.display="block";
	}
}

function finserta(obj){
	if(document.getElementById("txtinserta").value!=""){
      var oCntrl=document.getElementById("selectinserta");
 	 addOpt(oCntrl,
	        oCntrl.options.length,
			document.getElementById("txtinserta").value,
			document.getElementById("txtinserta").value);

	}
	fmostra(obj);
}

function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}

</script>
<body>
<span id="insertatxt" style="display:none">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input name="txtinserta" type="text" id="txtinserta" value="">&nbsp;</td>
    <td><input name="botinsertar" type="button" id="botinsertar" onClick="finserta(this)" value="Insertar">&nbsp;</td>
  </tr>
</table></span>
<span id="insertasel" style="display:block">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><select name="selectinserta" id="selectinserta">
        <option value="Opcion1">Opcion1</option>
        <option value="Opcion2">Opcion2</option>
        <option value="Opcion3">Opcion3</option>
      </select></td>
    <td><input name="botmostra" type="button" id="botmostra" onClick="fmostra(this)" value="Insertar">&nbsp;</td>
  </tr>
</table></span>
</body>
</html>

No serà permanente...claro. Para ello necesitarias un soporte en el lado servidor (bbdd)

Quim

flashtkd · #3 (**permalink**) 18/11/2009, 20:19

muchas gracias !! es justo lo que quiero aprender. gracias !!