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>

Answer 2

＆＃13;

var counter=0;
function generate(){
  var newTxt='<input type="text">';
  var newSel='<select><option value="">--select--</option></select>';
  var txtlimit=document.getElementById('txtlimit');
  var div=document.getElementById('newCtrls');
  var totalElem=div.getElementsByTagName('input').length;
  
  if(!isNaN(txtlimit.value) && txtlimit.value!=''){  
    if(parseInt(txtlimit.value)>counter && 
      parseInt(txtlimit.value)>totalElem){
      div.innerHTML += newTxt + newSel+'<br>';
      counter++;
     }
  }else{
    div.innerHTML +=newTxt + newSel+'<br>';
  }
}

＆＃13;

<input type="text" id="txtlimit" placeholder="Enter Limit"><br>
<input type="text" onkeyup="generate();">
<select onchange="generate();">
  <option value="Item1">--select--</option>
  <option value="Item1">Item1</option>
  <option value="Item2">Item2</option>
  <option value="Item3">Item3</option>
</select><br>
<div id="newCtrls">
  <h3>Dynamic Controls Here</h3>
</div>

＆＃13;

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

2 个答案: