将 jQuery 下拉菜单添加到可变长度数据输入页面

发布于 2024-10-06 09:06:20 字数 1228 浏览 4 评论 0原文

大家好，我正在创建一个报名表，允许人们在请求中添加多天。每个请求可以附加 1 天或多天，并且每天都需要做出一些选择，然后才能提交表单。我正在使用此处描述的方法来实现此目的。

现在，我想开始执行一些更高级的 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"}]

我知道这对于新手来说需要学习和弄清楚很多。有没有人愿意分享或了解教程，甚至可以为我指明正确的方向？（甚至是正确的术语）到目前为止，我对此的搜索一直失败。

原文

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:
Multi-day entry

(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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千寻… 2024-10-13 09:06:20

我可以推荐的最好的事情是，为单行获取一个共同的父级，并将其用作该行其余部分的参考点。（如果这些是表的，请标记 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 数据（大概）对每个下拉列表进行广泛的重新分配，因为这会影响当前的选择。因此，只要有可能，请保存数据并在创建新行时使用它。

Best thing I can recommend, grab a common parent for a single row and use that as a reference point throughout the rest of the row. (if these are <tr>'s of a table, label the tr or give it a class you can use to call it with). When you need to change something else in the row, use .closest to find the parent, then traverse back down to the field you desire.

Next, unless this data is truly dynamic, try caching the results of the drop-down in a local variable that you can use with each new row. That is to say, if there are always the same entries (retrieved via ajax) for request type and use hours type, just re-populate it from var request_types and var use_hours_types.

Third, look in to using .live as this will bind to the DOM elements despite changes made to it after the initial binding. So if your second part of the row is based on a selection of the drop down, use something like:

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

(or some facsimile).

Without seeing the code you have in place, just think about a different approach to how you gather the information. The tough part is you don't want to do a broad re-assignment of each drop-down with the ajax data (presumably) as this would effect current selections. So whenever possible save the data and use it when you create a new row.

回复收藏 0 原文