Javascript 使用php填充的选项附加select元素

我是网络编程的新手。我需要在表单中动态创建一个select元素。这个select元素的选项是用php填充的

我不知道怎么做。但我有这个密码，我不能去工作。 我可以用它创建选择标记，但是没有填充选项

HTML代码：

 <div id='page3'> 
 <input type='button' id='aprod'>
 </div>

JS代码：

$('#aprod').on('click',function(){
$('#page3').append('<select class="input" id="name_of_product" name="name_of_product">
<option value="">---</option> 
<?php include("config.php"); 
 $qry = $handler->prepare( "SELECT * FROM product_list WHERE plist_compid = ?");
 $qry->execute(array($id)); 
 while($row = $qry->fetch(PDO::FETCH_ASSOC)){ 
 $p_id = $row["plist_id"];  
 $p_name = $row["plist_name"];  
 echo "<option value= "$p_name">$p_name</option>"; 
 }  
?>  
</select>');
});

$（'aprod'）。在（'click'，function（）上{
$（'#第3页'）。追加（'
--- 
');
});

通常的做法是：

<div id='page3'>
<select style="display:none;" class='input' id='name_of_product' name='name_of_product'>
          <option value=''>---</option> 
          <?php include("config.php"); 
           $qry = $handler->prepare( "SELECT * FROM product_list WHERE plist_compid = ?");
           $qry->execute(array($id)); 
           while($row = $qry->fetch(PDO::FETCH_ASSOC)){ 
               $p_id = $row["plist_id"];  
               $p_name = $row["plist_name"];  
               echo '<option value= \"'.$p_name'\">'.$p_name.'</option>'; 
           }  
           ?>  
     </select> 
 <input type='button' id='aprod'>
 </div>

---

正如我在评论中所说，您不能在客户端事件上执行服务器端代码。而且，服务器端代码已经运行&不必等待您的click事件。您可以预先填充选择框，将其隐藏并在单击时显示，或者在单击时执行ajax并填充选择框。这是前一种选择：

<div id='page3'> 
    <input type='button' id='aprod' value="Show my select box" />
    <select class="input" id="name_of_product" name="name_of_product" style="display: none;">
        <option value="">---</option>
        <?php
            include("config.php"); 
            $qry = $handler->prepare( "SELECT * FROM product_list WHERE plist_compid = ?");
            $qry->execute(array($id));
            $options = "";
            while($row = $qry->fetch(PDO::FETCH_ASSOC)) { 
                $p_id = $row["plist_id"];  
                $p_name = $row["plist_name"];  
                $options .= '<option value="'.$p_name.'">'.$p_name.'</option>';
            }
            echo $options;
        ?>
    </select>
</div>

---

使用克隆功能，我能够完成这一点

下面是我的代码：

<div id='page3'> 
 <input type='button' id='aprod'>

 <select class="input" id="Factory_Name" name="factory">
    <option value = '' selected>---</option>

    <?php
    $qry = $handler->prepare( "SELECT * FROM factory_list WHERE flist_compid = ?");
    $qry->execute(array($id));
    while($row = $qry->fetch(PDO::FETCH_ASSOC)){
        $f_id = $row['flist_id'];
        $f_name = $row['flist_name'];
        echo "<option value= '$f_name'>$f_name</option>";
    }
    ?>

</select>
</div>

---

如果您收到任何错误，请检查控制台？没有错误，只是动态创建的select标记的选项没有填充。为什么要用js附加ap php查询？我该如何正确执行？您不能在客户端事件上执行服务器端代码。您可以预先填充选择框，将其隐藏并在单击时显示，或者在单击时执行ajax并填充选择框。

$('#aprod').on('click', function() {
    $('#name_of_product').show();
});

<div id='page3'> 
 <input type='button' id='aprod'>

 <select class="input" id="Factory_Name" name="factory">
    <option value = '' selected>---</option>

    <?php
    $qry = $handler->prepare( "SELECT * FROM factory_list WHERE flist_compid = ?");
    $qry->execute(array($id));
    while($row = $qry->fetch(PDO::FETCH_ASSOC)){
        $f_id = $row['flist_id'];
        $f_name = $row['flist_name'];
        echo "<option value= '$f_name'>$f_name</option>";
    }
    ?>

</select>
</div>

$('#aprod').on('click', function() {
    $('#Factory_Name').clone().appendTo('#page3');
});