javascript - jQuery:根据我们选择的数量创建多个输入字段

Question

我需要根据从 select 菜单中选择的数字创建 input 字段， 像这样的代码:

<select id="inputs" style="width:60px;">
    <option>1</option>
    <option>2</option>
    <option>3</option>                      
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>

当我们选择 10 时，input 字段会同时增加到 10，当我选择 2 时，它不会从 10 减少到 2 :(

我认为最好的方法可能是在循环中使用replace()；不幸的是我找不到解决方案。

$(document).ready(function() {
    var scntDiv = $('#add_words');
    var wordscount = 0;
    var i = $('.line').size() + 1;

    $('#inputs').change(function() {
        var inputFields = parseInt($('#inputs').val());
        for (var n = i; n < inputFields; ++ n){
            wordscount++;
            $('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv);
            i++;
        }  
        return false;
    });

    //    Remove button
    $('#add_words').on('click', '.remScnt', function() {
        if (i > 1) {
            $(this).parent().remove();
            i--;
        }
        return false;
    });
});

你能帮帮我吗？

Answer 1

尝试

$(function(){
    $('#inputs').change(function(){
        for(i=0; i < $("select option:selected").text; i++)
        {
            $('#divIdHere').append('<input blah blah />');
        }
    })
});

显然改变以适应 :)