Wie füge ich die Dropdown-Liste mit mysql-Tabellendaten bei Klick auf die Schaltfläche hinzu?

Question

Ich möchte Dropdown-Liste hinzufügen, wenn der Benutzer auf die Schaltfläche klickt. Die Daten in dieser Dropdown-Liste werden aus der Datentabelle mysql abgerufen. Wann immer der Benutzer auf die Schaltfläche Javascript-Funktion klickt, wird addfile() aufgerufen, die append-Funktion verwendet, um HTML-Inhalt auf der Webseite hinzuzufügen. Das Problem besteht darin, dass der HTML-Inhalt der Dropdown-Liste mit der MySQL-Datenbanktabelle gefüllt ist. Gibt es eine Möglichkeit, die Daten der Datenbanktabelle vorher zu speichern und diese Daten dann auf der Clientseite zu verwenden, um die Dropdownliste beim Klick auf den Benutzer zu generieren und sie mit bereits abgerufenen Daten zu füllen.

zB ..

<p id="file_div"> 
     <label for="skills" class="icon-pencil">Key Skills 
     </label><br/> 
     <!-- <input type="text" name="txtSkill[]" placeholder="Skill" style='width:90%;' />--><?php if(isset($errorSkill)){echo $errorSkill;}?> 
     <select name="ddlSkill[]"> 
           <?php 
            $conn = mysqli_connect("localhost","root","","jobportal"); 
            $sql = "SELECT * FROM skills"; 
            $stmt = $conn->query($sql); 
            while($row = $stmt->fetch_array()){ 
             echo "<option>"; 
             echo $row[1]; 
             echo "</option>"; 
            }; 
           ?> 
     </select> 
    </p> 
    <p> 
     <button type="button" onClick="add_file();" class="add_more btn btn-info"> 
     <span class="icon-plus"></span> Add More Skills 
     </button> 
    </p> 


<script> 
function add_file() 
{ 
$("#file_div").append("<p style='margin-top:10px;'> 
        <select name='ddlSkill[]'> 
         <?php 
          $conn = mysqli_connect('localhost','root','','jobportal'); 
          $sql = 'SELECT * FROM skills'; 
          $stmt = $conn->query($sql); 
          while($row = $stmt->fetch_array()){ 
           echo '<option>'; 
           echo $row[1]; 
           echo '</option>'; 
          }; 
         ?>; 
        </select> 
        <img src='images/cross.jpg' width='20px' title='Delete this Skill' class='cursor-link' onclick=remove_file(this);></p>"); 
} 

function remove_file(ele) 
{ 
$(ele).parent().remove(); 
} 
</script> 

Answer 1

bereits.

<p id="file_div"> 
     <label for="skills" class="icon-pencil">Key Skills 
     </label><br/> 
     <!-- <input type="text" name="txtSkill[]" placeholder="Skill" style='width:90%;' />--><?php if(isset($errorSkill)){echo $errorSkill;}?> 
     <div id="dropdown-create"> 

     </div> 
    </p> 
    <p> 
     <button type="button" onClick="add_file();" class="add_more btn btn-info"> 
     <span class="icon-plus"></span> Add More Skills 
     </button> 
    </p> 
<script> 
function add_file() 
{ 
$.ajax({ 
       type: "POST", 
       url: "index.php",/*current file name*/ 
       async:false, 
       data: {func:'dropdown'}, 
       success: function(res){ 
         list = res; 
         $("#dropdown-create").html(""); 
         $("#dropdown-create").html(list); 
        } 
       }); 
} 
if($_REQUEST['func'] == 'dropdown'){ 
    <?php 
     $conn = mysqli_connect("localhost","root","","jobportal"); 
     $sql = "SELECT * FROM skills"; 
     $stmt = $conn->query($sql); 
     echo '<select name="ddlSkill[]">'; 
     while($row = $stmt->fetch_array()){ 
      echo "<option>"; 
      echo $row[1]; 
      echo "</option>"; 
     }; 
     echo '</select>'; 
     exit(); 
} ?> 
</script>