title: Can I dynamically change input to dropdown menu that queries from mysql
body: <p>This is my code, it appends the input form after the user clicks the "Add more" button.</p>
  
  <p>How can I change the input field to a dropdown menu that queries the data from mysql?</p>
  
  <p>Thank you ^^</p>
  
  <h2>My HTML code</h2>
  
  <pre><code>&lt;form name="add_name" id="add_name"&gt;
      &lt;div class="table-responsive"&gt;
          &lt;table class="table table-bordered" id="dynamic_field"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" name="name[]" class="form-control name_list" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button type="button" name="add" id="add" class="btn btn-success"&gt;Add More&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My javascript</p>
  
  <pre><code>&lt;script&gt;  
      $(document).ready(function(){  
          var i=1;  
          $('#add').click(function(){  
              i++;  
              $('#dynamic_field').append('&lt;tr id="row'+i+'"&gt;&lt;td&gt;&lt;input type="text" name="name[]" class="form-control name_list" /&gt;&lt;/td&gt;&lt;td&gt;&lt;button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove"&gt;X&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');  
          }); 
  
          $(document).on('click', '.btn_remove', function(){  
              var button_id = $(this).attr("id");   
              $('#row'+button_id+'').remove();  
          });  
  
          $('#submit').click(function(){            
              $.ajax({  
                  url:"name.php",  
                  method:"POST",  
                  data:$('#add_name').serialize(),  
                  success:function(data)  
                  {  
                      alert(data);  
                      $('#add_name')[0].reset();  
                  }  
              });  
          });  
      });  
  &lt;/script&gt;
  </code></pre>