ボタンクリックでmysqlテーブルのデータをドロップダウンリストに追加する方法は？

Question

ボタンをクリックしたときにドロップダウンリストを追加したい。このドロップダウンリスト内のデータは、mysqlデータテーブルから取得されます。ユーザーがボタンをクリックするたびに、append関数を使用してWebページにhtmlコンテンツを追加するaddfile（）が呼び出されます。問題は、ドロップダウンリストのHTMLコンテンツにmysqlデータベーステーブルが設定されていることです。データベーステーブルの値を手元に保存してからクライアント側でこのデータを使用して、ユーザーがクリックしてドロップダウンリストを作成し、既にフェッチされたデータを入力する方法はありますか？

例えば..

<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

はこれを試してみてください。

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