根據文本框的值創建文本框

Question

基本上，我想做的是在頁面上只有一個文本框。 用戶輸入數字時，它應自動在其下方生成X數量的其他文本框。

我已經能夠基於下拉框使其工作，但是下拉框不適用於此應用程序。

<html>

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>

$(document).ready(function(){
$("#ppl").change(function(){

    // The easiest way is of course to delete all textboxes before adding new ones
    //$("#holder").html("");

    var count = $("#holder input").size();
    var requested = parseInt($("#ppl").val(),10);

    if (requested > count) {
        for(i=count; i<requested; i++) {
        var $ctrl = $('<input/>').attr({ type: 'text', name:'text', value:'text'});        
            $("#holder").append($ctrl);
        }
}
    else if (requested < count) {
        var x = requested - 1;
        $("#holder input:gt(" + x + ")").remove();
    }
});
});
</script>

</head>
<body>
<SELECT id="ppl">
            <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="holder"></div>
</body>
</html>

還有沒有其他方法可以使用ajax而不是jquery來執行類似的操作？

演示：小提琴

Answer 1

我再次更新了您的小提琴，因為您的小提琴將所有內容都放在HTML部分中。 jsFiddle 。

為了給它們提供唯一的名稱，您需要做的就是將索引（ i ）連接到名稱字段的末尾，如下所示：

for (i = count; i < requested; i++) {
  var $ctrl = $('<input/>').attr({
                type: 'text',
                name: 'text' + i,
                value: 'text'
            });
  $("#holder").append($ctrl);
}

這將為您提供唯一的名稱：（“ text1”，“ text2”，..等）。 我已經在更新的小提琴中為您更改了它。

對於您的AJAX問題，我同意@Barmar，除非您需要獲取僅服務器可以提供的數據，否則沒有必要再執行其他服務器請求。 它只是在方程式中增加了另一個因素，可能會減慢速度。 如果JavaScript可以為您做完全一樣的事情，但是在客戶端而不是在服務器端，那絕對是一個更快的選擇。

Answer 2

這是一個類似的解決方案。 如果您從Ajax獲得所需的框數，則只需要調用'generateTextBoxes'函數即可。

<html>
<head>
    <script type="text/javascript" src="jquery-1.9.js"></script>
    <script>
        var generateTextBoxes = function( qty, container ) {
            if (container) {
                for (var i = 1; i <= qty; i++ ) {
                    $('<label for="box-'+i+'">Box '+i+'</label>&nbsp;<input id="box-'+i+'" name="box-'+i+'" type="text" /><br>').appendTo( container );
                }
            }
        }
        var init = function() {
            $('#btnGenBoxes').on('click', function() {
                generateTextBoxes( $('#box-0').val(), $('#putThemHere') );
            });
        }
        window.onload = init;
    </script>
</head>
<body>

    <label for="box-0" />How many?</label> &nbsp;
    <input type="text" id="box-0" name="box-0" />
    <br>
    <input type="button" id="btnGenBoxes" value="Generate text boxes" />
    <br><br>
    <div id="putThemHere"></div>

</body>
</html>

根據文本框的值創建文本框

問題描述

2 個解決方案

解決方案1
2 2013-05-02 01:18:34

解決方案2
0 2013-05-02 01:30:04

根據文本框的值創建文本框

問題描述

2 個解決方案

解決方案1 2 2013-05-02 01:18:34

解決方案2 0 2013-05-02 01:30:04

解決方案1
2 2013-05-02 01:18:34

解決方案2
0 2013-05-02 01:30:04