如何使用 jQuery 创建动态表单？答案

【问题标题】：How to create a dynamic form using jQuery?如何使用 jQuery 创建动态表单？
【发布时间】：2010-08-03 16:31:50
【问题描述】：

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

例如，我有一个包含 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 插件“自动化”事情？

可预见的问题

如果#foo 设置为“是”，则#bar 设置为“其他”，然后#foo 设置为“否”，我希望#bar 的依赖关系也被停用/隐藏.
输入被启用/禁用和/或可见/隐藏；能够为元素定义自定义行为会很好。

重新发明轮子

如果有做这种事情的插件，请告诉我！好像没找到……

【问题讨论】：

标签： jquery forms jquery-plugins

【解决方案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);}

【讨论】：

Ian，这是一个公平的开始，但是一旦你开始包含很多选项，form 变量就会变得非常混乱......我接受了这个并使用它并想出了一些漂亮的东西优雅的。我会尽快发布。

【解决方案2】：

快速插件

(function($){

  $.fn.inputDependsOn = function(id, values, options){

    var self = this;

    // methods
    this.disable = function(e){
      return e.addClass(options.cssClass).attr({disabled: true}).trigger("disable");
    };

    this.enable = function(e){
      return e.removeClass(options.cssClass).attr({disabled: null}).trigger("enable");
    };

    // options
    options = $.extend({}, $.fn.dependsOn.defaults, options || {});

    var parent = $(id);

    this.each(function(){
      var child = $(this);

      // parent binds
      parent
        .bind("change", function(){
          var v = parent.val();
          if(parent.is(":not(:disabled)") && v in values){
            self[values[v]](child);
          }
          else {
            self[options.init](child);
          }
          child.change();
        })
        .bind("disable", function(){
          self.disable(child);
        })
      ;
    });

    // init
    parent.change();
    return this;
  };

  $.fn.dependsOn.defaults = {
    init: "disable",
    cssClass: "disabled"
  };

})(jQuery);

使用原始问题中的 HTML，可以通过以下方式实现目标：

$("#bar").inputDependsOn("#foo", {"1": "enabled"});
$("#baz").inputDependsOn("#bar", {"other": "enable"});

这个插件会在这里维护和更新：

github.com/macek/jquery-input-depends-on

【讨论】：