Question

陷入困境！

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

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

现在我希望我的用户输入他喜欢的城市数量，为此，他必须点击链接Add 1 more city，然后再显示一个表单框。

如何在HTML中执行此类任务

Answer 1

这是一个很好的方法：

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

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

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

希望它会有所帮助，

Zorken17

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用jquery clone函数。

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

请参阅此question

<强>更新

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

Answer 3

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

Answer 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/

动态表格框

4 个答案: