如何以动态形式创建动态创建的下拉列表？

Question

您好，我正在尝试使用 MySQL、PHP 和 JavaScript 设置设备日志。 在过去的 3 个月里，我一直在努力自学。 我拥有的很多东西都来自我在这里或其他论坛上找到的代码。

我有一个页面专门用于在我们的设备上输入硬件更改。 子系统和组件下拉菜单设置为从数据库中提取子系统列表，并根据子系统选择填充组件列表。 我对 JavaScript 还没有深入了解，所以我不完全理解这段代码的一些含义。

我把页面设置为输入一个修改，然后提交后，有一个链接返回页面添加另一个修改。 此选项按预期工作。 我的下拉菜单正常工作，我的数据按预期输入到我的数据库中。

我正在尝试设置一个页面，以便如果有多个修改，它们可以添加到一个页面上。 表单上的所有文本输入字段都按预期工作。 我不确定如何为子系统和组件动态创建下拉列表。 如果我不将 PHP 代码添加到动态表单部分，则按 ADD ROW 时会出现下拉列表，但不会正常填充下拉列表。 原始下拉菜单确实会在此页面上正常填充。

有没有人能够指出我可以了解我的代码在哪里偏离轨道的正确方向？ 我正在努力学习，但在这一点上我不确定如何表达我正在寻找的东西。

我很感激你看看这个。 请不要对我糟糕的代码太苛刻。 我正在努力让它在我学习的过程中变得更好。

任何关于创建下拉列表或表单的更好方法的建议也非常感谢。

以上是我页面的 2 个版本的代码笔。 我为动态表单创建找到的教程使用了一个表格，因此我不得不为此更改我的 html。 一旦我的表单可以工作，我计划尝试使用网格，就像我在单个输入页面上所做的那样。

<?php
session_start();
include('./includes/DbConnect.php');

$query = "SELECT * FROM lu_subsystem";
            $result_sub= $db->query($query);
?>
<!DOCTYPE html>
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <!-- <link rel="stylesheet" href="includes/styling.css" type="text/css"> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#subsystem_id').on('change',function(){
                var subsystemID = $(this).val();
                if(subsystemID){
                    $.ajax({
                        type:'POST',
                        url:'ajaxData.php',
                        data:'subsystem_id='+subsystemID,
                        success:function(html){
                            $('#component_id').html(html);
                        }
                    });
                }else{
                    $('#state').html('<option value="">Select Subsystem First</option>');
                }
            });
        });
        </script>
    <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript">
            function add_row()
            {
             $rowno=$("#hw_modification tr").length;
             $rowno=$rowno+1;
             $("#hw_modification tr:last").after("<tr id='row"+$rowno+"'>\
             <td><label for='subsystem_id'>Subsystem</label><select id='subsystem_id' name='subsystem_id[]'><option value=''>Select Subsystem</option></td>\
             <td><label for='component_id'>Component</label><select id='component_id' name='component_id[]''><option value=''>Select Component</option></select></td>\
             <td><label for='manufacturer_id'>Manufacturer</label><input type='text' name='manufacturer_id[]'></td>\
             <td><label for='new_pn'>New Part Number</label><input type='text' name='new_pn[]' id='new_pn'></td>\
             <td><label for='new_sn'>New Serial Number</label><input type='text' name='new_sn[]' id='new_sn'></td>\
             <td><label for='new_fw'>New Firmware</label><input type='text' name='new_fw[]' id='new_fw'></td>\
             <td><label for='new_rev_id'>New Revision</label><input type='text' name='new_rev_id[]' id='new_rev_id'></td>\
             <td><label for='old_pn'>Old Part Number</label><input type='text' name='old_pn[]' id='old_pn'></td>\
             <td><label for='old_sn'>Old Serial Number</label><input type='text' name='old_sn[]' id='old_sn'></td>\
             <td><label for='old_fw'>Old Firmware</label><input type='text' name='old_fw[]' id='old_fw'></td>\
             <td><label for='old_rev_id'>Old Revision</label><input type='text' name='old_rev_id[]' id='old_rev_id'></td>\
             <td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
            }
            function delete_row(rowno)
            {
             $('#'+rowno).remove();
            }
            </script>
</head>
<body>
    <?php
    // echo $_SESSION['new_util_id'];
    ?>
    <img src="includes/Accuray-logo_rgb.png" alt="Accuray Logo">
    <div class="heading">Hardware Modifications</div>
    <form action="insert_hw_modifications2.php" method="post">        
    <table id="hw_modification"> 
        <tr id="row1">
            <td><label for="subsystem_id">Subsystem</label>
                <select id="subsystem_id" name="subsystem_id[]">
                <option value="">Select Subsystem</option>
                <?php
                    if($result_sub -> num_rows >0){
                        while($row=$result_sub->fetch_assoc()){
                            echo '<option value="'.$row['id'].'">'.$row['subsystem_name'].'</option>';
                        }
                    }else{
                        echo '<option value="">Subsystem not available</option>';
                        }
                    
                ?>
                </select>
            </td>
            <td><label for="component_id">Component</label>
                <select id="component_id" name="component_id[]">
                <option value="">Select Component</option>
                </select>
            </td>
            <td>
                <label for="manufacturer_id">Manufacturer</label>
                <input type="text" name="manufacturer_id[]" id="manufacturer_id">
            </td>
            
            <td>
                <label for="new_pn">New Part Number</label>
                <input type="text" name="new_pn[]" id="new_pn">
            </td>

            <td>
                <label for="new_sn">New Serial Number</label>
                <input type="text" name="new_sn[]" id="new_sn">
            </td>

            <td>
                <label for="new_fw">New Firmware</label>
                <input type="text" name="new_fw[]" id="new_fw">
            </td>

            <td>
                <label for="new_rev_id">New Revision</label>
                <input type="text" name="new_rev_id[]" id="new_rev_id">
            </td>

            <td>
                <label for="old_pn">Old Part Number</label>
                <input type="text" name="old_pn[]" id="old_pn">
            </td>

            <td>
                <label for="old_sn">Old Serial Number</label>
                <input type="text" name="old_sn[]" id="old_sn">
            </td>

            <td>
                <label for="old_fw">Old Firmware</label>
                <input type="text" name="old_fw[]" id="old_fw">
            </td>

            <td>
                <label for="old_rev_id">Old Revision</label>
                <input type="text" name="old_rev_id[]" id="old_rev_id">
            </td>

        </tr>
   
    </table>   
        <input type="button" onclick="add_row();" value="ADD ROW">
        <input class='submit' type="submit">
        
    </form>
    </body>
</html>

Answer 1

我一直在研究你的代码，老实说，我在 Jquery 方面做得并不多。 但是，我仍然想举一个例子，说明如何根据我的经验实现页面上的信息：

您可以使用 php 直接从数据库中提取信息，而无需使用 javascript。 如果为此使用 PDO，则会得到一个多维数组。

然后，您可以使用 foreach 循环“遍历”数组

$select ='<select id='yourChoice'>';
foreach($array as $component){
    $name = component['name'];
    $select.="<option value='$name'> $name </option>;
};
$select.='</select>';

在这种情况下， $array 是来自数据库的完整打印输出，并遍历每一行（ $component）

然后它选择列名，并填写它。

如果你想用 javascript 做同样的事情，你可以用 JSON 来做，遍历那个数组。 不幸的是，我目前没有准备好用于该示例的示例。 我希望这能帮助您进一步搜索。

如何以动态形式创建动态创建的下拉列表？

问题描述

1 个解决方案

解决方案1
0 2021-11-08 21:46:53

如何以动态形式创建动态创建的下拉列表？

问题描述

1 个解决方案

解决方案1 0 2021-11-08 21:46:53

解决方案1
0 2021-11-08 21:46:53