Динамически генерировать текстовое поле, когда пользователь вводит что-то

Question

Изначально у меня есть одно текстовое поле/selectbox, когда пользователь что-то вводит, или что-то генерирует другое текстовое поле/selectbox, а также я могу установить ограничение на количество текстовых полей/selectbox.

пожалуйста мне совет, как я могу добиться этого

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

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>'; 
 
    } 
 
}

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