javascript - 当用户输入内容时动态生成文本框

Question

最初，当用户输入内容或选择内容时，我有一个文本框/选择框，生成另一个文本框/选择框，而且我还可以设置限制可以生成多少个文本框/选择框。

请告诉我如何实现这一目标

Answer 1

您可以使用 jQuery append() 方法动态创建 html。

$("#ddlOptions").on("change", function(e) {

  var len = $('.txtInput').length;
  if (len == 0) {
    $('.container').append('<br> <input type="text" id=txtTextBox_' + len + ' class="txtInput" /> <br>');
  }
});

$(document).on("change", '.txtInput', function() {
  var len = $('.txtInput').length;
  
  if ($(this).val() != "") {
    $('.container').append('<br> <input type="text" id=txtTextBox_' + len + ' class="txtInput" /> <br>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <select id="ddlOptions">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option>option 4</option>
  </select>
</div>