使用文本框的值類型動態地創建選擇框

Question

我想動態創建一個選擇框，但使用文本框的值的次數。如果用戶插入100，則應該動態創建帶有100選項的選項框。 這是我的代碼，我是如何做到的。

---

<input type="text" name="txt" id="txt"> 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
var num; 
$("#txt").blur(function(){ 
     num = $('#txt').val(); 
     num = parseInt(num); 
     alert('created'); 
     var arr = []; 
     for (i = 1; i <= num; i++) { 
       var pusssh = {val : i, text: i+'_text'} 
       arr.push(pusssh); 
       } 
     var sel = $('<select>').appendTo('body'); 
     $(arr).each(function() { 
     sel.append($("<option>").attr('value',this.val).text(this.text)); 
     }); 
    }); 
}); 
</script> 

Answer 1

<input type="text" id="txt"> 
<script type="text/javascript"> 
    $("#txt").change(function(){ 
     if ($("#idselect")) 
      $("#idselect").remove(); 
     var num = $(this).val(); 
     var st = ''; 
     for (i=1; i<=num; i++) 
      st += '<option value="' + i + '">' + i + '</option>'; 
     $(this).append('<select id="idselect">' + st + '</select>'); 
    }); 
</script> 

Answer 2

這是jQuery的非常簡單（不要忘了添加jQuery的參考）你可以如下做到這一點：

HTML：

<input type="text" id="myInput"> 
<select id="myddl"> 

</select> 

Jquery ：

$("#myInput").change(function(){ 
var val=parseInt($(this).val(),10); 
AddOptions(val) 
}) 
function AddOptions(val) 
{ 
    $('#myddl').empty(); 
    for(i=1;i<=val;i++) 
    { 
     var newOption = $('<option>'); 
     newOption.attr('value', i).text('Lavel'+i); 
     $('#myddl').append(newOption); 
    } 
} 

DEMO HERE

Answer 3

我以爲你要更新您的<select>如果有人改變了輸入值（以使另一<select>代替）。這是你更新的代碼：

$("#txt").blur(function() { 
 
var num = $('#txt').val(); 
 
num = parseInt(num); 
 
console.log('Creating a select with ' + num + ' options...') 
 
var arr = []; 
 
for (i = 1; i <= num; i++) { 
 
    var pusssh = { 
 
    val: i, 
 
    text: i + '_text' 
 
    } 
 
    arr.push(pusssh); 
 
} 
 
if($('#sel').length == 0) { 
 
    var sel = $('<select id="sel">').appendTo('body'); 
 
} 
 
$('#sel').find('option').remove(); 
 
$(arr).each(function() { 
 
    $('#sel').append($("<option>").attr('value', this.val).text(this.text)); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="txt">