사용자가 무언가를 입력하면 동적으로 텍스트 상자를 생성합니다.

Question

처음에 사용자가 무언가를 입력하거나 다른 텍스트 상자/선택 상자를 생성 할 때 하나의 텍스트 상자/선택 상자가 생기며 생성 할 수있는 텍스트 상자/선택 상자의 수를 제한 할 수 있습니다.

내가이

Answer 1

당신은 동적으로 HTML을 생성하는 jQuery를 append() 방법을 사용할 수 있습니다 달성 할 수있는 방법을 나에게 조언을 주시기 바랍니다.

$("#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>