Adición de jQuery Drop Downs a una página de entrada de datos de longitud variable

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

Ahora, quiero comenzar a realizar algunas funciones más avanzadas de la interfaz de usuario, como usar una fuente de datos JSON para crear mis listas desplegables con una relación padre-hijo. Todavía soy un desarrollo web bastante nuevo (procedente del desarrollo de pantalla verde de IBM i), así que todavía estoy aprendiendo con ejemplos y tutoriales. He encontrado muchos ejemplos de menús desplegables de padres e hijos cuando solo hay un conjunto, pero necesito que esto funcione para cualquier número de filas y para todas las nuevas filas que se agregaron en la página al tiempo que puedo mostrar el valor seleccionado correcto para cada fila cuando se carga la página de edición. Para colmo, quiero, cuando se realicen ciertas selecciones, revelar algunos campos nuevos.

Aquí está lo que tengo hasta ahora: Entrada de varios días

(Esta captura de pantalla se basa en no preocuparse por las características finales y simplemente en hacer que funcione. El menú desplegable del niño muestra actualmente todo).

Tipo de solicitud selecciona el tipo de licencia que desea tomar. Use Hours Type obtiene una lista basada en lo que se ingresa en Request Type. El problema que tengo con lo anterior es hacer que funcione en las nuevas filas agregadas al hacer clic en “Agregar día”. El desafío entonces es mostrar / ocultar la segunda fila según el tipo de solicitud. Si una persona selecciona Enfermedad por enfermedad del empleado, debe mostrarse Naturaleza de la enfermedad, si selecciona otra opción, muestra tanto Naturaleza de la enfermedad como Relación. Si seleccionan Vacaciones, no deberían ver ninguno de los campos.

Tengo la configuración de JSON para estas listas. Incluí los campos que definen qué se muestra para qué 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 que un novato lo aprenda y lo descubra. ¿Alguien ha hecho esto que esté dispuesto a compartir o saber de un tutorial o incluso puede indicarme la dirección correcta? (Incluso la terminología adecuada) Mi búsqueda de esto ha sido un fracaso hasta ahora.

Lo mejor que puedo recomendar es tomar un padre común para una sola fila y usarlo como punto de referencia en el rest de la fila. (Si se trata de

de una tabla, rotule tr o asigne una clase que pueda usar para llamarla). Cuando necesite cambiar algo más en la fila, use .closest para encontrar al padre, luego recorra el campo que desea.

A continuación, a menos que estos datos sean realmente dynamics, intente almacenar en caché los resultados del menú desplegable en una variable local que puede usar con cada nueva fila. Es decir, si siempre hay las mismas entradas (recuperadas a través de ajax) para el tipo de solicitud y el tipo de horas de uso, simplemente var use_hours_types y var use_hours_types .

Tercero, busque el uso de .live ya que esto se unirá a los elementos DOM a pesar de los cambios realizados después del enlace inicial. Entonces, si su segunda parte de la fila se basa en una selección del menú desplegable, use 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 vigente, solo piense en un enfoque diferente sobre cómo recostackr la información. La parte difícil es que no desea hacer una reasignación amplia de cada menú desplegable con los datos ajax (probablemente) ya que esto afectaría las selecciones actuales. Así que siempre que sea posible, guarde los datos y utilícelos cuando cree una nueva fila.

Tengo un comienzo de una solución más en esta pregunta .