javascript - 使用选择下拉列表调用 javascript 函数

Question

我正在使用一个动态表单，最终用户可以通过单击添加按钮来输入他想要的尽可能多的 Material ，此按钮调用一个 JavaScript 函数，该函数将一个下拉列表插入到我的表单中。如果我删除了它工作的选择部分，它会调用输入字段，但如果我添加选择部分，它不会调用该函数。

 <script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
function add_row()
{
 $rowno=$("#recipe_details tr").length;
 $rowno=$rowno+1;
$("#recipe_details tr:last").after("<tr id='row"+$rowno+"'>    <td><select name="Material1[]">
<?php 

$sql2 = mysqli_query($conn, "SELECT * FROM Material");

while ($r = $sql2->fetch_assoc()){

?>
<option value= <?php echo $r["Material_ID"] ?>><?php echo $r["Material"]; ?></option>

<?php
// close while loop 
}
?></select></td><td><input type='text' name='quantity[]' placeholder='Enter Quantity'></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
 $('#'+rowno).remove();
}
</script>




<div id="wrapper">

<div id="form_div">
 <form method="post" action="">
  <table id="recipe_details" align=center>
   <tr id="row1">
    <td><select name="Material1[]">
<?php 

$sql2 = mysqli_query($conn, "SELECT * FROM Material");

while ($r = $sql2->fetch_assoc()){

?>
<option value= <?php echo $r["Material_ID"] ?>><?php echo $r["Material"]; ?></option>

<?php
// close while loop 
}
?></select></td>
    <td><input type="text" name="quantity[]" placeholder="Enter Quantity"></td>
   </tr>
  </table>
  <input type="button" onclick="add_row();" value="ADD ROW">
  <input type="submit" name="submit_row" value="SUBMIT">
 </form>
</div>

</div>

Answer 1

更新代码:-

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
function add_row()
{
    $rowno = $("#recipe_details tr").length;
    $rowno = $rowno+1;

    $("#recipe_details tr:last").after(
        `<tr id='row` + $rowno + `'><td><select name='Material1[]'>
         <?php 

    $sql2 = mysqli_query($conn, "SELECT * FROM Material");

    while ($r = $sql2->fetch_assoc()){

    ?>
    <option value = <?php echo $r["Material_ID"] ?>><?php echo $r["Material"]; ?></option>

    <?php
    // close while loop 
    }
    ?>
        <option value = 'Option 1'>Option 1</option>
        </select ></td >
        <td><input type='text' name='quantity[]' placeholder='Enter Quantity'></td>
        <td><input type='button' value='DELETE' onclick=delete_row('row`+ $rowno + `')></td></tr>"`);
}
function delete_row(rowno)
{
    $('#'+rowno).remove();
}
</script>




<div id="wrapper">

<div id="form_div">
 <form method="post" action="">
  <table id="recipe_details" align="center">
   <tr id="row1">
    <td><select name="Material1[]">
<?php 
$sql2 = mysqli_query($conn, "SELECT * FROM Material");
while ($r = $sql2->fetch_assoc()){

?>
<option value ='<?php echo $r["Material_ID"] ?>><?php echo $r["Material"];?>'></option>

<?php
// close while loop 
}
?></select></td>
    <td><input type="text" name="quantity[]" placeholder="Enter Quantity"></td>
   </tr>
  </table>
  <input type="button" onclick="add_row();" value="ADD ROW">
  <input type="submit" name="submit_row" value="SUBMIT">
 </form>
</div>

</div>

我已经在我的机器上检查了这个片段以获取员工列表。它工作正常。如果您仍然面临一些问题，请告诉我。它也应该适用于您的机器。