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

Question

嘿所有，我正在创建一个条目表单，允许一个人在请求中添加多天。每个请求可以附加1天或更多天，并且每天都有一些选择可以提交表单。我正在使用method described here来完成此任务。

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

这是我到目前为止所拥有的：

（这是屏幕截图是基于不担心最终功能，只是让它工作。孩子下拉目前显示一切。）

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

我为这些列表设置了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"}]

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

Answer 1

我可以推荐最好的东西，抓住一行的公共父级，并将其用作整个行的其余部分的参考点。 （如果这些是表的<tr>，则标记tr或为其提供一个可用于调用它的类。如果您需要更改行中的其他内容，请使用.closest查找父级，然后返回到您想要的字段。

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

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

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

（或某些传真）。

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

Answer 2

我在this question开始提供解决方案。