将jQuery Drop Downs添加到可变长度数据输入页面

嘿所有,我正在创建一个条目表单,允许一个人为请求添加多天。 每个请求可以附加1天或更多天,每天都有一些选项可以提交表单。 我正在使用此处描述的方法来实现此目的。

现在,我想开始做一些更高级的UIfunction,比如使用JSON数据源来构建具有父子关系的下拉列表。 我仍然是一个非常新的Web开发(来自IBM i绿屏开发)所以我仍然通过示例和教程学习。 我发现很多只有一组的父子下拉的例子,但是我需要这个来处理任意数量的行以及页面上添加的所有新行,同时能够显示正确的选定值加载编辑页面时的每一行。 最重要的是,我想在做出某些选择时,揭示一些新的领域。

这是我到目前为止: 多日入场

(这是屏幕截图是基于不担心最终function,只是让它工作。孩子下拉目前显示一切。)

请求类型选择您要采取的假期类型。 使用小时类型根据输入到“请求类型”的内容获取列表。 我对上面的问题是让它在单击“添加日”时添加新行。 然后,挑战是根据请求类型显示/隐藏第二行。 如果一个人选择病态 – 员工疾病,疾病的性质应该显示,如果他们选择另一个选项,它显示疾病和关系的性质。 如果他们选择度假,他们不应该看到任何一个字段。

我为这些列表设置了JSON。 我包含了定义显示哪个选项的字段。

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

我知道这对新手学习和弄清楚是很多的。 有没有人这样做,愿意分享或知道一个教程,甚至可以指出我正确的方向? (即使是正确的术语)到目前为止,我对此的搜索失败了。

我可以推荐的最好的东西,抓住一行的共同父级,并在整个行的其余部分使用它作为参考点。 (如果这些是表的

,则标记tr或给它一个可以用来调用它的类)。 当您需要更改行中的其他内容时,请使用.closest查找父级,然后返回到您想要的字段。

接下来,除非此数据是真正动态的,否则请尝试在每个新行可以使用的局部变量中缓存下拉列表的结果。 也就是说,如果对于请求类型和使用小时类型总是存在相同的条目(通过ajax检索),只需从var request_typesvar use_hours_types重新填充它。

第三,查看使用.live因为这将绑定到DOM元素,尽管在初始绑定后对其进行了更改。 因此,如果行的第二部分基于下拉列表的选择,请使用以下内容:

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

(或一些传真)。

如果没有看到您所拥有的代码,只需考虑一种不同的方法来收集信息。 困难的部分是您不希望使用ajax数据(大概)对每个下拉列表进行广泛的重新分配,因为这会影响当前的选择。 因此,只要有可能,保存数据并在创建新行时使用它。

在这个问题上我有一个解决方案的开始。