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

Question

Single Hardware Modification单个硬件修改

Mulitple Hardware Modifications多次硬件修改

Hello, I am trying to set up an equipment log using MySQL, PHP, and JavaScript.您好，我正在尝试使用 MySQL、PHP 和 JavaScript 设置设备日志。 I have been trying to teach myself over the past 3 months.在过去的 3 个月里，我一直在努力自学。 A lot of what I have is from code I have found here or on other forums.我拥有的很多东西都来自我在这里或其他论坛上找到的代码。

I have a page dedicated to inputting hardware changes on our equipment.我有一个页面专门用于在我们的设备上输入硬件更改。 The Subsystem and Component dropdowns are set to pull the subsystem list from the database, and the component list is populated based off subsystem selection.子系统和组件下拉菜单设置为从数据库中提取子系统列表，并根据子系统选择填充组件列表。 I have not gotten that far into JavaScript, so I do not fully understand some of what this code means.我对 JavaScript 还没有深入了解，所以我不完全理解这段代码的一些含义。

I have the page set up to input one modification, then after submitting, there is a link to return to the page to add another modification.我把页面设置为输入一个修改，然后提交后，有一个链接返回页面添加另一个修改。 This option is working as expected.此选项按预期工作。 My dropdowns work and my data is input into my database as expected.我的下拉菜单正常工作，我的数据按预期输入到我的数据库中。

I am trying to set up a page so that if there are multiple modifications, they can be added on one page.我正在尝试设置一个页面，以便如果有多个修改，它们可以添加到一个页面上。 All of my text input fields on the form work as expected.表单上的所有文本输入字段都按预期工作。 I am unsure how to dynamically create the dropdowns for the subsystem and component.我不确定如何为子系统和组件动态创建下拉列表。 If I do not add the PHP code to the dynamic form section, the dropdowns appear when I press ADD ROW, but the dropdowns do not populate normally.如果我不将 PHP 代码添加到动态表单部分，则按 ADD ROW 时会出现下拉列表，但不会正常填充下拉列表。 The original dropdowns do populate normally on this page.原始下拉菜单确实会在此页面上正常填充。

Would anyone be able to point me in the right direction of where I can learn where my code is going off track?有没有人能够指出我可以了解我的代码在哪里偏离轨道的正确方向？ I am trying to learn, but at this point I am not exactly sure how to phrase what I am looking for.我正在努力学习，但在这一点上我不确定如何表达我正在寻找的东西。

I appreciate you taking a look at this.我很感激你看看这个。 Please do not be too harsh on my poor code.请不要对我糟糕的代码太苛刻。 I am working to make it better as I learn.我正在努力让它在我学习的过程中变得更好。

Any suggestions for a better way to create the dropdown or form is also greatly appreciated.任何关于创建下拉列表或表单的更好方法的建议也非常感谢。

Above are codepens for the 2 versions of my page.以上是我页面的 2 个版本的代码笔。 The tutorial that I found for the dynamic form creation uses a table so I had to alter my html for that.我为动态表单创建找到的教程使用了一个表格，因此我不得不为此更改我的 html。 I plan to try using grid like I did with the single input page once I can get my forms to work.一旦我的表单可以工作，我计划尝试使用网格，就像我在单个输入页面上所做的那样。

<?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

I have been looking into your code, and to be honest, I havent done much in Jquery.我一直在研究你的代码，老实说，我在 Jquery 方面做得并不多。 However, I still want to give you an example on how you can implement the information on your page from my experience:但是，我仍然想举一个例子，说明如何根据我的经验实现页面上的信息：

You can either pull the information directly from the database with php without using javascript.您可以使用 php 直接从数据库中提取信息，而无需使用 javascript。 If you use PDO for this, you get a muldimension array.如果为此使用 PDO，则会得到一个多维数组。

you can then "walk" through the array with a foreach loop然后，您可以使用 foreach 循环“遍历”数组

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

in this case the $array is the full printout from the database, and goes through each row ( $component)在这种情况下， $array 是来自数据库的完整打印输出，并遍历每一行（ $component）

it then selects the column name, and fills it in.然后它选择列名，并填写它。

if you want to do the same thing with javascript, you can do it with JSON, walking through that array.如果你想用 javascript 做同样的事情，你可以用 JSON 来做，遍历那个数组。 unfortunately, i dont have an example ready for that one at the moment.不幸的是，我目前没有准备好用于该示例的示例。 I hope this will help you further your search.我希望这能帮助您进一步搜索。

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

问题描述

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