for 루프를 사용하여 여러 폼 요소를 동적으로 렌더링하는 방법

Question

양식에 특정 수의 입력 태그를 표시하려고합니다. 이것은 사용자가 얼마나 많은 항목을 동적으로 선택하는지에 달려 있습니다.

예를 들어 사용자가 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'); 
        } 

그러면 선택한 각 항목 수에 대해 아래의 입력 선택 태그 중 하나를 렌더링해야합니다. 나는 이것이 당신에게 당신의 문제를 해결하는 방법에 대한 아이디어를 제공 희망

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

:

    <?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

당신이 뭔가를해야합니다.

DEMO