Problemilla al crear input y select con javascript

[phpeitor]

Buenas, tengo una pagina en la que muestro un listado de una agenda, en ella tengo un pequeño buscador, queria subir unas imagenes pero no puedo hasta que tenga más de 30 mensajes :S, asi que os explico un poco:

En el buscador tengo un select en el que muestro los siguientes campos:
- Apellidos
- Nombre
- Empresa
- Relacion

Elijo uno de ellos y escribo en un input type text lo que quiero buscar y luego le doy al boton buscar.

Pues bien, yo queria que cuando pulsara sobre "Relacion" el input donde escribo se cambie por un select con las opciones correspondientes a "Relacion". Esto lo he conseguido con Javascript, el problema es que cada vez que entra en la funcion me crea un salto de linea y la pequeña tabla donde tengo metido el buscador se va haciendo cada vez mas alta.

No se porque me ocurre esto y tampoco sabria eliminar ese salto de linea. Si alguien sabe el porque ocurre o como solucionarlo le agradeceria mucho que me ayudara.

Os dejo el código html:

Código HTML:

<form action="agenda2.php" method="get" name="fbusca">
<table id="tablabusca" width="50%" align="center">
<tr>
       <td width="150px"><strong style="color:#FFFFFF">Búsqueda por: </strong></td>
       <td><select name="sbusca" onChange="cambia()"> <option>Apellidos</option><option>Nombre</option><option>Empresa</option><option>Relacion</option></select> </td>
       <td><input type="text" name="tbusca" size="35" id="tbusca"></td>
       <td><input type="submit" value="Buscar"></td>
</tr>
</table>
</form> 

Y la funcion javascript:

Código HTML:

<script language="javascript">
function cambia()	{
      var opcion= fbusca.sbusca.value;
      fi=document.getElementById('tablabusca');
      if (opcion=="Relacion")	{
             elemento=document.createElement('select');
             elemento.id='tbusca';
             elemento.name='tbusca';
             elemento.option='hola';
             elemento.options[0]=new Option('Suministro');
             elemento.options[1]=new Option('Proveedores');
             elemento.options[2]=new Option('Admin. Pública');
             elemento.options[3]=new Option('Notario');
             elemento.options[4]=new Option('Abogado');
             elemento.options[5]=new Option('Traductor');
             elemento.options[6]=new Option('Amigo');
             elemento.options[7]=new Option('Otros');
             fi.appendChild(elemento);
            //Ya he creado el nuevo elemento, en este caso un select. A continuacion lo sustituyo por el input.
		
             borra=document.getElementById('tbusca');
             borra.parentNode.replaceChild(elemento, borra);
      }
      else	{
            elemento=document.createElement('input');
            elemento.id='tbusca';
            elemento.name='tbusca';
            elemento.type='text';
            elemento.size=35;
            fi.appendChild(elemento);
            borra=document.getElementById('tbusca');
            borra.parentNode.replaceChild(elemento, borra);
     }
}
</script> 

Gracias y saludos

[luks77]

Hola.

Me parese que los options no tienen valores.

Vos lo tenes asi

Código HTML:

<select name="sbusca" onChange="cambia()"> <option>Apellidos</option><option>Nombre</option><option>Empresa</option><option>Relacion</option></select> 

Y me parese que es asi:

Código HTML:

<select name="sbusca" onChange="cambia()">  
<option value='apellido'>Apellidos</option>
<option value='nombre'>Nombre</option>
<option value='empresa'>Empresa</option>
<option value='relacion'>Relacion</option></select> 

Igual me parese, no estoy seguro, soy nuevo en esto y talvez me este confundiendo

[programeitor]

Veo tres conflictos:

-.creas el elemento con el mismo id que el campo que va a reemplazar.
-.anexas a la tabla "sin pan ni ná" un select, es decir, sin incluirlo dentro de un td o afin.
Problemente sea este el salto d linea.
-.reemplazas elemento(tbusca) por borra(tbusca), lo reemplazas por si mismo, no se como te funciona eso.

Una posible solucion pasa por crear el elemento sin id y sin indexarlo a ninguna parte, reemplazar el campo tbusca por elemento y a continuacion darle a elemento el id tbusca.

[phpeitor]

Gracias programeitor, el problema del espacio era exactamente eso, estaba cogiendo la tabla entera, ahora le he puesto un id al td y cojo solo ese campo y ya no me inserta ningun salto de linea. Lo del "tbusca" es que me interesa que ese elemento sea un input o un select tengan el mismo name para poder llevarme el valor luego con php sin mas problemas.

Una vez mas, gracias por la ayuda