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

【问题标题】：How to add the dropdown list with mysql table data on button click?如何在按钮单击时添加带有 mysql 表数据的下拉列表？
【发布时间】：2016-11-30 18:08:50
【问题描述】：

我想在用户点击按钮时添加下拉列表。此下拉列表中的数据是从 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>

【问题讨论】：

是的，您可以将其存储到 javaScript 变量中，也可以使用 JSON。
您应该使用 AJax 调用去服务器并在存储后获取数据以查看。然后您可以使用该数据制作下拉列表
@Saedawke 你能举个javascript变量的例子吗

标签： php jquery mysql

【解决方案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>

【讨论】：