Question

我想在用户点击按钮时添加下拉列表。此下拉列表中的数据是从mysql数据表中获取的。每当用户点击按钮时，调用javascript函数addfile（），它使用append函数在网页上添加html内容。问题是下拉列表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>

如何在按钮单击时添加带有mysql表数据的下拉列表？

1 个答案: