動態添加元素從jquery或javascript

Question

如果用戶輸入一個輸入說3到文本框三個小文本框應該顯示在下面或通過JavaScript或jQuery的彈出。如何做到這一點...

<input type="text" name="order">3</input> 

謝謝..

Answer 1

記住你應該掩蓋文本框只允許數字條目......或者，也許用一個下拉列表，用數字來防止錯誤的列表。但here是一個很好的jQuery蒙板插件來防止非數字條目。

<input type="text" name="Order" onKeyDown="checkVal(this)">3</input> 

<div id="myDiv"> 
</div> 


function checkVal(ctrl){ 
    var val = ctrl.value; 
    $('myDiv').html(''); // remove existing elements 
    for (i=0;i<parseInt(val,10);i++){ 
     $('#myDiv').append('<input type="text" />'); 
    } 
} 

Answer 2

給這個<input/>「秩序」的ID，那麼它的那樣簡單：

var order = $('#order'), 
    container = $('<div/>').insertAfter(order); 

order.keyup(function(){ 
    container.html(
     Array(Math.abs(~~this.value) + 1).join('<input/>') 
    ); 
}); 

僅供參考，~~（雙位操作不）具有獲得的任何數量表示的效果鍵入（使用內部toInt32操作），然後對其進行鋪設。 E.g：

~~'2'; // => 2 
~~'2.333'; // => 2 
~~null; // => 0 

而且Math.abs是爲了防止負值，如果傳遞給Array()將拋出一個錯誤。

DEMO：http://jsbin.com/azexa4