Question

新手在网上..

这应该很简单。我有文本框，用户应该写City。我希望用户按下＆＃34;添加城市＆＃34;将显示另一个文本框（最多执行3次）。你能告诉我如何实现这个目标吗？

<section class="row-inner clearfix">
    <section class="form-field">
        @Html.TextBoxFor(m => m.Cities, new { @class = "autocomplete-init-no-img"})
        <label>Cities</label>
    </section>

    <section class="form-field">
        <a href="#">Add City</a>
    </section>
</section>

Answer 1

您需要通过JS完成此客户端。我向您展示的示例使用JQuery。

像

这样的东西

$("#button").click(function(){
   $("#section").append("<input type='text' name='City1'/>");
});

这个问题是你最终会动态地处理参数。如果你知道你只想要3，那就没问题。

如果你想使用更多的内置控件，你可以做类似的事情。

<div>@Html.TextBoxFor(...city1...)</div>
<div class="hidden">@Html.TextBoxFor(....city2....)</div>

然后对于JS，你可以找到第一个隐藏的并取消隐藏它。

$("#button").click(function(){
   $(".hidden").first().show();
});

您还需要隐藏＆＃34;添加城市＆＃34;添加了所有可添加城市后的按钮。

希望有所帮助。

Answer 2

使用属性创建文本框的Javascript ...

var input = document.createElement('input'); 
input.type = "text"; 
//...    
container.appendChild(input);

创建一个按钮并添加onClick功能

<button id="myButton" onClick="javaScriptFunction();"> button Text </button>

在函数中创建按钮（参见上面的代码）并将其添加到HTML正文...

动态添加文本框

2 个答案: