动态表单框 [关闭]答案

【问题标题】：Dynamic form boxes [closed]动态表单框 [关闭]
【发布时间】：2016-02-06 21:56:15
【问题描述】：

陷入困境！

我有一个表单，用于输入用户想去的不同城市。

我有一个表单框和一个提交按钮。

现在我希望我的用户输入他喜欢的多个城市，为此他必须点击一个链接Add 1 more city，然后应该会出现另一个表单框。

如何在 HTML 中执行此类任务

【问题讨论】：

有很多使用Javascript动态添加元素到网页的例子。请做一些研究并尝试自己解决。

标签： javascript php html

【解决方案1】：

使用 jquery clone 函数。

$('select#options').clone().attr('id', 'newOptions').appendTo('.blah');

看到这个question

更新

为您找到了好的snippet。正是你需要的

【讨论】：

【解决方案2】：

将城市框放入 div 并为该 div 分配一个 id 并在单击添加 1 按钮时调用 java 脚本的方法，然后在方法中通过 java 脚本将其他城市框 html 附加到 div 中。

【讨论】：

【解决方案3】：

这是一个很好的方法：

<div id="inputBoxes"> 
    <input />
</div>

<button type="button">Add more</button>

$('button').click(function() {
    $('#inputBoxes').append('<input>');
});

希望对你有帮助，

Zorken17

$('button').click(function() {
  $('#inputBoxes').append('<input>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>


<div id="inputBoxes"> 
    <input />
</div>

<button type="button">Add more</button>

【讨论】：

【解决方案4】：

也许这是一个很好的起点

<form id="myForm">
<div id="cities">
    <input class="city" type="text" />
</div>

var $cityInputs;

function registerEvents() {
    $cityInputs = $('input.city').not(':disabled');

    $cityInputs.blur(function(event){
        var $element = $(event.target);

        if ($element.val().trim().length !== 0)         {
            appendNewInput.call($('#cities'));
            $element.attr('disabled','disabled');
        }
    })
}

function appendNewInput() {
    this.append('<input class="city" type="text">');

    registerEvents();
}

registerEvents();

http://jsfiddle.net/9ckv5f23/3/

【讨论】：