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

how to dynamically render multiple form elements using for loop

本文关键字：表单 元素 何使用 for 循环 动态      更新时间：2023-09-26

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

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

我不清楚进行这项工作的最佳方式。例如，我可以确定他们从选择选项中选择了多少项目：

 $(".howmany").change(function(){
            var value  = $(this).val(); 
}

但此后的正确做法是什么；我是否使用为每个动态呈现所选输入标签的确切数量：或者预显示（但隐藏）所有输入标签，只显示所请求的输入标签的准确数量。

我希望能举一个例子说明它是如何做到的。目前我只能隐藏整个区域。例如：

var requests =  $("#howmany").val();
        if (reqeusts < 1){
            $('#reqeusts').hide();
        }
        else {
           $('#reqeusts').show();
       }

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

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

非常抱歉，但我忘了提一下造成混乱的原因是imput的值是由数组函数动态提供的。

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

然后，我需要为每个选择的项目数量呈现下面的imput-select标签之一。

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

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

$(".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);
}

您需要这样的东西：

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

我希望这能让你知道如何解决你的问题。

DEMO

相关文章：