Question

我需要根据从input菜单中选择的号码创建select个字段，喜欢这段代码：

<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 />');
        }
    })
});

明显改变以适应：）

Answer 2

我意识到你已经接受了这个问题的答案，但我不满足于将问题保持原样。另外：我有点无聊。做到这一点你会...

原来如此！这是我（迟来的）答案。

我的方法的好处或背后的原因是：

您可以使用select删除和添加行。
使用select删除行以删除行时，首先删除那些带有空input的行，然后从末尾删除任意数量的填充input的行。
它还允许您使用.remScnt链接。

希望这是一些，即使只是学术，使用或兴趣：

function makeRow() {
    var div = document.createElement('div'),
        input = document.createElement('input'),
        a = document.createElement('a');
        t = document.createTextNode('remove');
    div.className = 'line';
    input.type = 'text';
    a.href = '#';
    a.className = 'remScnt';
    a.appendChild(t);
    div.appendChild(input);
    div.insertBefore(a, input.nextSibling);

    return div;
}


$('#inputs').change(

function() {
    var num = $(this).val(),
        cur = $('div.line input:text'),
        curL = cur.length;
    if (!curL) {
        for (var i = 1; i <= num; i++) {

            $(makeRow()).appendTo($('body'));
        }
    }
    else if (num < curL) {
        var filled = cur.filter(

        function() {
            return $(this).val().length
        }),
            empties = curL - filled.length,
            dA = curL - num;

        if (empties >= num) {
            cur.filter(

            function() {
                return !$(this).val().length;
            }).parent().slice(-num).remove();
        }
        else if (empties < num) {
            var remainder = num - empties;
            cur.filter(

            function() {
                return !$(this).val().length;
            }).parent().slice(-num).remove();
            $('div.line').slice(-remainder).remove();
        }
    }
    else {
        var diff = num - curL;
        for (var i = 0; i < diff; i++) {
            $(makeRow()).appendTo($('body'));
        }
    }
});
$('body').on('click', '.line a.remScnt', function() {
    console.log($(this));
    $(this).parent().remove();
});

JS Fiddle demo

请注意，我很少或（更确切地说）没有尝试确保跨浏览器的可用性。 makeRow()函数中使用的本机DOM方法用于（增加速度的次要优化）速度，使用jQuery（其跨浏览器抽象可能使事情更可靠。并且值得考虑。

参考文献：

Native vanilla JavaScript：
- node.appendChild()。
- document.createElement()。
- document.createTextNode()。
- element.className()。
- node.insertBefore()。
jQuery的东西：
- appendTo()。
- change()。
- filter()。
- parent()。
- slice()。
- :text selector。
- val()。

Answer 3

好吧稍微改变它以允许创建新列表。

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

这将基本上清空div的内容，然后再将它们全部添加回来：）

Answer 4

你需要在使用追加之前让你DIV 试试这个html

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

和Jquery使用此importand行scntDiv.empty();

JQuery的

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

    $('#inputs').change(function() {
        var inputFields = parseInt($('#inputs').val());
          scntDiv.empty()
          for (var i = 0; i < inputFields; i++){
            scntDiv.append($('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" />'));
          }
    });
});

Answer 5

当select值增加时，你只能添加新行来弥补行数，并且当它减少时只删除'extra'行。

$( document ).ready(
    function() {
        var divs = $( 'div#add_words' );
        $( '#inputs' ).change(
            function(evt) {
                var n = $( this ).val();
                var lines = $( 'div.line' );
                var numlines = lines.size();
                if( n > numlines ) {
                    // We want more line. Add some.
                    while( n > numlines ) {
                        numlines += 1;
                        divs.append( '<div class="line">Line ' + numlines + '</div>' );
                    }
                }
                else {
                    // Remove everything after the n'th line.
                    lines.slice( n ).remove();
                }
            } )
        .change();
    } );

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

5 个答案: