使用文本框的值类型动态地创建选择框

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