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

[["D01","DATA 1"],["D02","DATA 2"],["D03","DATA 3"],["D04","DATA 4"],["D05","DATA 5"],["D06","DATA 6"]]

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

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

3 个答案: