動的フィールドを作成し、その中にデータを入力してください

動的フィールドが作成されるJSONデータとHTMLフォームがあります。このフォームはデータを送信します。しかし、動的にそれらを動的フィールドを作成し、その中にデータを入力してください

JSONデータ

$data = {"1":"a","3":"b","5":"c","2":"d","4":"e"}

のindex.php

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-compat-git.js"></script> 

    <title>Add/Remove Input Fields Dynamically with jQuery</title> 
    <script type="text/javascript"> 
     $(function() { 
      $('.multi-field-wrapper').each(function() { 
       var $wrapper = $('.multi-fields', this); 
       $(".add-field", $(this)).click(function(e) { 
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
       }); 
       $('.multi-field .remove-field', $wrapper).click(function() { 
        if ($('.multi-field', $wrapper).length > 1) 
         $(this).parent('.multi-field').remove(); 
       }); 
      }); 
     }); 
    </script> 

</head> 

<body> 
    <form role="form" action="" method="POST"> 
     <label>Stuff</label> 
     <div class="multi-field-wrapper"> 
      <div class="multi-fields"> 
       <div class="multi-field"> 
        <select name="id[]"> 
         <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> 
        </select> 
        <input type="text" name="stuff[]"> 
        <button type="button" class="remove-field">Remove</button> 
       </div> 
      </div> 
      <button type="button" class="add-field">Add field</button> 
     </div> 
     <input type="submit"> 
    </form> 
</body> 

</html>

を作成することによって、フィールドを埋めるためにどのようにすべてのヘルプは理解されるであろう。

出典

2017-02-24 Rohan Khude

このダイナミックフィールドでは、指定したデータをどのように埋め込むかを詳しく説明できますか？つまり、select要素では、対応する値を対応する入力に入れる必要がありますか？ – gaetanoM

フォームを生成するPHPの外観はどうですか？具体的には '