将jQuery下拉添加到可变长度数据输入页面 [英] Adding jQuery Drop Downs to a Variable Length Data Entry Page

问题描述

嗯，我正在创建一个允许一个人添加多个请求的日期的表单。每个请求可以附加1天或更多天，并且每天在提交表单之前有几个选择。我正在使用。

Hey all, I am creating an entry form that allows a person to add multiple days to a request. Each request can have 1 or more days attached and each day has a few selections to make before they can submit the form. I am using the method described here to accomplish this.

Now, I want to start doing some more advanced UI features like using a JSON data source to build my drop down lists with a parent-child relationship. I am still quite new web development (coming from IBM i green-screen development) so I am still learning by examples and with tutorials. I have found many examples of parent-child drop downs when there is only one set, but I need this to work for any number of rows and for all new rows that have been added on the page while being able to display the correct selected value for each row when the edit page loads. To top this off, I want, when certain selections are made, to reveal some new fields.

Here is what I have so far:

(This is screen shot is based on not worrying about the end features and just getting it working. The child drop down currently shows everything.)

Request Type selects the type of leave you want to take. Use Hours Type gets a list based on what is entered into Request Type. The problem I have with the above is getting it to work on new rows added when clicking "Add Day". The challenge then is to show/hide the second row based on the Request Type. If a person selects Sick - Employee Illness, Nature of Illness should show, if they select another option, it show both Nature of Illness and Relationship. If they select Vacation, they shouldn't see either field.

I have JSON setup for these lists. I included the fields that define what gets shown for which option.

[{"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"}]

I know this is a lot for a newbie to learn and figure out. Has anyone done this that is willing to share or know of a tutorial or even can point me in the right direction? (Even the proper terminology) My searches for on this has been a failure thus far.

解决方案

I have a start of a solution over at this question.

这篇关于将jQuery下拉添加到可变长度数据输入页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！