代码之家 › 专栏 › 技术社区 › maÄek

如何使用jquery创建动态表单?

jquery-plugins forms jquery

maÄek · 技术社区 · 16 年前

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

例如,我有一个包含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>

什么时候? 酒吧 的值设置为 other ,我想启用 #baz .

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

我的目标

我想要一些关于编写一个小插件的指导,它允许使用依赖项轻松创建表单输入。

我想要简短的语法。我是否可以添加HTML属性帮助器来帮助jquery插件实现“自动化”功能?

可预见问题

如果 福禄 设置为“是”,则 酒吧 设置为“其他”,则 福禄 设置为“否”,我将需要 酒吧 的依赖项也被停用/隐藏。
输入是启用/禁用和/或可见/隐藏的;能够为元素定义自定义行为将是很好的。

重新发明轮子

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

2 回复 | 直到 16 年前

Ian Wetherbee 16 年前

您将重点关注事件处理 .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);}

maÄek 16 年前

快速插件

(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