html 表单的无限层级输入

Question

我想添加用于添加新类别的表单。类别可能有不定式子类别。

$(document).ready(function () {
    var max_fields = 15; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function (e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="input_fields_wrap_sec"><input type="text" name="mytext[]" placeholder="Sub-Category title"/>\n\
                                <input type="submit" name="submit1" value="Add Sub-Sub-Category" class="add_field_button" >\n\
                                <a href="#" class="remove_field">Remove</a></div>'
                    ); //add input box
        }
    });

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST">
   <div class="input_fields_wrap">
      <p>Please enter the Category Title</p>
      <input type="text" name="mytext[]" placeholder="Category title">
      <input type="submit" name="submit1" value="Add Sub-Category" class="add_field_button" >
   </div>
   <input type="submit" name="submit" value="submit">
</form>

现在我有类似 this 的形式，当我按下 "add sub-sub category" 时，它应该出现新的 "sub-sub category" 输入按钮："add sub-sub-sub category" 和 "remove"

应该是this，类别的深度不定式

Answer 1

拉巴斯！

您可以尝试这样的操作：

function getValueText(level) {

  let i = 0
  let text = "Add ";
  while (i < level) {
    text += "sub-"
    i++;
  }

  return text + "category";
}

function appendInnerCategory(level, element) {
  var myDiv = document.createElement("div");
  myDiv.className = "level-" + level
  var btn = document.createElement("input");
  btn.type = "button";
  btn.value = getValueText(level);
  btn.addEventListener("click", function(event) {
    appendInnerCategory(level + 1, event.target.parentNode);
  });
  var textBox = document.createElement("input");
  textBox.type = "text";
  myDiv.appendChild(textBox);
  myDiv.appendChild(btn);
  element.appendChild(myDiv);
}

appendInnerCategory(0, document.querySelector('.wrapper'));

HTML:

<div class="wrapper"></div>

Fiddle: http://jsfiddle.net/7L382gow/

更新 fiddle 以维护结构对象，同时操纵 DOM。

提交会将生成的层次结构打印到控制台。

http://jsfiddle.net/bqk6pmjg/

html 表单的无限层级输入

html Unlimited hierarchy input to form

html

javascript

categories