jquery - 如何使用 jQuery 创建动态表单？

Question

我见过很多有关动态添加行或字段的帮助，但我对控制相互依赖的字段感兴趣。

例如，我有一个包含 3 个用户输入的表单:

<select id="foo">
  <option value="0">No</option>
  <option value="1">Yes</option>
</select>

当#foo的值设置为1时，我想启用#bar。

<!-- by default, bar should be disabled -->
<select id="bar">
  <option value="something_1">Something 1</option>
  <option value="something_2">Something 2</option>
  <option value="other">Other...</option>
</select>

当#bar的值设置为other时，我想启用#baz。

<!-- by default, baz should be disabled -->
<textarea id="baz"></textarea>

<小时/>

我的目标

我想要一些有关编写小插件的指导，该插件可以轻松创建具有依赖项的表单输入。

我想要简短、简洁的语法。有没有办法添加 html 属性助手来帮助 jQuery 插件“自动化”操作？

可预见的问题

1. 如果#foo设置为“Yes”，则#bar设置为“other”，则#foo设置为“不”，我也希望 #bar 的依赖项停用/隐藏。
2. 输入已启用/禁用和/或可见/隐藏；能够为元素定义自定义行为会很好。

重新发明轮子

如果有一个插件可以做这种事情，请告诉我!我好像没找到……

Answer 1

您需要重点关注以 .change() 事件作为入口点的事件处理。处理程序可以在 JSON 结构中查找表单元素 ID 和值，以确定需要执行哪些操作(如果有)。 JavaScript 可能如下所示:

form = {"input1" : 
    {"value1": {
        /*action list */
        [{"hide": ["input2", "input3"], "show": ["input4"], "set": {"input5": "True", "input6": "False"}]
    },
    "value2": {[/* another set of actions */]}
}


function onchange(e) {
    id = $(this).attr("id");
    value = $(this).val();
    if (id in form) {
        if (value in form[id]) {
            $.each(form[id][value], function(i, action) {
                if ("hide" in action) { $(action).hide(); }
                /* etc for other actions */
            });
        }
    }
}

$(document).ready(function() {$("input").change(onchange);}