如何以動態形式創建動態創建的下拉列表？

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