JQuery añadiendo gota Downs a una longitud variable de entrada de datos Página

Question

Hola a todos, estoy creando un formulario de entrada que permite a una persona a agregar varios días a una solicitud. Cada solicitud puede tener 1 o más días unidos y cada día tiene unas cuantas opciones para hacer antes de que puedan enviar el formulario. Estoy utilizando el método descrito aquí para lograr esto.

Ahora, quiero empezar a hacer algunas de las características de interfaz de usuario más avanzadas como el uso de una fuente de datos JSON para construir mi listas desplegables con una relación padre-hijo. Todavía estoy desarrollo web bastante nuevo (procedente de IBM desarrollo de pantalla verde i) por lo que todavía estoy aprendiendo por medio de ejemplos y con tutoriales. He encontrado muchos ejemplos de menús desplegables padre-hijo cuando sólo hay un conjunto, pero necesito que esto funcione para cualquier número de filas y para todas las nuevas filas que se han añadido en la página, mientras que ser capaz de mostrar el valor seleccionado correcta para cada fila cuando se carga en Editar página. Para superar esto fuera, que quiero, cuando se realizan ciertas selecciones, para revelar algunos de los nuevos campos.

Esto es lo que tengo hasta ahora:

(Esta es la captura de pantalla se basa en no tener que preocuparse acerca de las características finales y simplemente conseguir que funcione. El niño desplegable actualmente muestra todo.)

Solicitud Tipo selecciona el tipo de licencia que desea tomar. Use horas Tipo obtiene una lista sobre la base de lo que se ingresa al tipo de solicitud. El problema que tengo con el anterior es conseguir que funcione en las nuevas filas agregadas al hacer clic en "Añadir Día". El reto es, entonces, para mostrar / ocultar la segunda fila en base al tipo de solicitud. Si una persona selecciona por enfermedad - Enfermedad del empleado, naturaleza de la enfermedad debe mostrar, si seleccionan otra opción, se muestran tanto la naturaleza de la enfermedad y la relación. Si seleccionan de vacaciones, que no vean cualquiera de los campos.

He fijado JSON para estas listas. Incluí los campos que definen lo que se muestra para la opción.

[{"Id":11,"Title":"Employee Illness","ParentId":10,"MapToCode":"02","HasRelationship":false,"HasNatureOfIllness":true,"ChildRequired":false,"Notes":"","AccrualCode":"S"},
{"Id":1,"Title":"Vacation","ParentId":0,"MapToCode":"04","HasRelationship":false,"HasNatureOfIllness":false,"ChildRequired":false,"Notes":"","AccrualCode":"VAC"}]

Sé que esto es mucho para un novato para aprender y entender. Alguien ha hecho esto que está dispuesto a compartir o sabe de un tutorial o incluso me puede apuntar en la dirección correcta? (Incluso la terminología adecuada) Mis búsquedas para este ha sido un fracaso hasta el momento.

Answer 1

Tengo un inicio de una solución sobre la dirección esta pregunta .

Answer 2

Lo mejor que puedo recomendar, agarra un padre común para una sola fila y usar eso como un punto de referencia en todo el resto de la fila. (Si estos son de <tr> de una mesa, la etiqueta de la tr o darle una clase que puede utilizar para llamarlo con). Cuando tenga que cambiar algo más en la fila, el uso .closest para encontrar a los padres, a continuación, travesía de vuelta al campo que desea.

A continuación, a menos que estos datos son verdaderamente dinámica, intente almacenamiento en caché de los resultados de la lista desplegable en una variable local que se puede utilizar con cada nueva fila. Es decir, si no siempre son las mismas entradas (recuperado a través de AJAX) para el tipo de solicitud y el uso horas tipo, sólo re-poblarlo de var request_types y var use_hours_types.

En tercer lugar, en el aspecto de usar .live ya que este se unirá a los elementos DOM a pesar de los cambios realizados a la misma después de la unión inicial. Así que si su segunda parte de la fila se basa en una selección de la gota abajo, usar algo como:

$('dropdown').live('change',function(){
   $(this).close('parent_object').filter('.corresponding_row').show();
});

(o algún facsímil).

Sin ver el código que tiene en su lugar, sólo pensar en un enfoque diferente a la forma en que se reúnen la información. La parte difícil es que no quiere hacer una amplia re-asignación de cada desplegable con los datos Ajax (presumiblemente) ya que esto afectaría a las selecciones actuales. Así que siempre que sea posible guardar los datos y utilizarlos cuando se crea una nueva fila.