如何使用for循环动态呈现多个表单元素

Question

我想为一个表单显示一定数量的输入标签；这应该取决于用户动态选择他们想要的项目数量。

例如，如果用户说他们想要 3 件商品。我想显示 3 个输入栏。

我不清楚进行此操作的最佳方法。例如，我能够确定他们从选择选项中选择了多少项目：

 $(".howmany").change(function(){

            var value  = $(this).val(); 

}

但是之后的正确方法是什么？我是否使用 for each: 动态呈现选择的输入标签的确切数量：或预显示（但隐藏）所有输入标签，并且只显示请求的输入标签的确切数量。

我会很感激它是如何完成的一个例子。目前我只能隐藏整个区域。例如：

var requests =  $("#howmany").val();

        if (reqeusts < 1){
            $('#reqeusts').hide();
        }
        else {
           $('#reqeusts').show();
       }

但我显然需要能够根据用户选择的数字显示单独的表单标签。

再次嗨，我要感谢大家的回答。

非常抱歉，但我忘了提及造成混淆的原因是输入的值是从数组函数动态馈送的。

public function arrayValues() 
                    {
                        return $selection = array(
                            '0' => 'none' ,' 1' => '1 item' ,' 2' => '2 item' ,' 3' =>' 3 item' );
                    } 

然后我需要为每个选定的项目数呈现以下输入选择标签之一。

                    <?php echo ' 
                    <select id="howmany" name="items[howmany]"  />'; 


                    foreach ($arrayValues as $key => $value)
                    {       
                        echo '<option value="' . $key .'">' . $value . '</option>';
                    }
                    echo'</select>'; 
                    ?>

Answer 1

$(".howmany").change(function(){

            var value  = $(this).val(); // get the number of inputs
            value = parseInt(value); // make sure it's an integer
            htmlStr = "";
            for (var i = 0; i < value; i++)
            {
                  htmlStr += "Label " + i +" <input type='text'>";
            }

            $('.container').empty();
            $('.container').append(htmlStr);
}

Answer 2

你需要这样的东西：

$('button').click(function () {
    $('div').empty().append(new Array(+$('input[type=number]').val()+1)
   .join("<input type='text' placeholder='Type Something'/>"));
});

我希望这能让您了解如何解决您的问题。

DEMO