Problema para Agregar campos y mostrar datos desde select

[NicoMo]

Hola,
Mi nombre es Nicolás y vengo leyendo el foro hace un tiempo, buscando información y aprendiendo bastante.

Estoy trabajando en un proyecto que consiste en pasar un sistema de base de datos que habíamos hecho en Acces a php con mysql.

Aquí me encuentro con un pequeño problema. Cuando armamos una proforma, lo hacemos con dos tablas una que contiene los datos del cliente, y la otra que contiene los productos a presupuestar. Hasta acá no hay problema, con js tengo una función que agrega un campo. Por otro lado, los productos se seleccionan de una lista que toma los nombres e id’s de la base de datos. En el select se pone un dato, y los otros los muestro en cajas de texto (id, etiqueta, precio, descripción, etc.). El inconveniente me surge cuando pongo estas dos funciones juntas.

Copio el código de mostrar por pantalla los datos del select.

HTML:

Código:

<input name="desc" type="text" id="desc" readonly /> <select id="miselect" name="miselect" onChange="cargarDesc()">
<option value="Valor1">0001</option>
<option value="Valor2">0002</option>
<option value="Valor3">0003</option>
<option value="Valor4">0004</option>
</select>

Script:

Código:

<script type="text/javascript">

function cargarDesc()
{
	var miDesc = document.getElementById('miselect').value;
	document.getElementById('desc').value = miDesc;
	return;
}
 
</script>

Aqui muestro solo el de agregar una nueva linea.

HTML:

Código:

<form action="" method="post" id="form">
<table id="tabla">
	
	<tbody>
 
		<!-- fila base para clonar y agregar al final -->
		<tr class="fila-base">
			<td><select id="miselect" name="miselect" onChange="cargarDesc()">
<option value="Valor1">0001</option>
<option value="Valor2">0002</option>
<option value="Valor3">0003</option>
<option value="Valor4">0004</option>
</select>
			</td>
			<td class="eliminar">Eliminar</td>
		</tr>
		<!-- fin de código: fila base -->
 
		
 
	</tbody>
</table>
</form>
<!-- Botón para agregar filas -->
<input type="button" id="agregar" value="Agregar fila" />

Script:

Código:

<script type="text/javascript">
 
$(function(){
	// Clona la fila oculta que tiene los campos base, y la agrega al final de la tabla
	$("#agregar").on('click', function(){
		$("#tabla tbody tr:eq(0)").clone().removeClass('fila-base').appendTo("#tabla tbody");
	});
 
	// Evento que selecciona la fila y la elimina 
	$(document).on("click",".eliminar",function(){
		var parent = $(this).parents().get(0);
		$(parent).remove();
	});
});

</script>

Aqui se ven los dos conceptos trabajando juntos.

Código:

<form action="" method="post" id="form">
<table id="tabla">
	
	<tbody>
 
		<!-- fila base para clonar y agregar al final -->
		<tr class="fila-base">
			<td> <input name="desc" type="text" id="desc" readonly /> <select id="miselect" name="miselect" onChange="cargarDesc()">
<option value="Valor1">0001</option>
<option value="Valor2">0002</option>
<option value="Valor3">0003</option>
<option value="Valor4">0004</option>
</select>
			</td>
			<td class="eliminar">Eliminar</td>
		</tr>
		<!-- fin de código: fila base -->
 
		
 
	</tbody>
</table>
</form>
<!-- Botón para agregar filas -->
<input type="button" id="agregar" value="Agregar fila" />


<script type="text/javascript">
 
$(function(){
	// Clona la fila oculta que tiene los campos base, y la agrega al final de la tabla
	$("#agregar").on('click', function(){
		$("#tabla tbody tr:eq(0)").clone().removeClass('fila-base').appendTo("#tabla tbody");
	});
 
	// Evento que selecciona la fila y la elimina 
	$(document).on("click",".eliminar",function(){
		var parent = $(this).parents().get(0);
		$(parent).remove();
	});
});

function cargarDesc()
{
	var miDesc = document.getElementById('miselect').value;
	document.getElementById('desc').value = miDesc;
	return;
}
 
</script>

Espero haber sido claro y muchas gracias por su ayuda.