使用 jquery 获取从表中的数据库填充的下拉列表的值-解网

问：

我想从数据库中填充表中的下拉列表，并在按下按钮时使用 jquery 发送数据。如果我手动填充下拉列表，一切正常，但是当我从数据库填充时，只返回第一个单词。

$servername = "localhost";
$username = "abcde";
$password = "fghij";
$database = "klmno";
$mysqli = new mysqli($servername, $username, $password, $database);   
$id =""; 
if(isset($_POST['id'])){
    $id = $_POST['id'];
    $name = $_POST['name'];
    $age = $_POST['age'];
    $colour = $_POST['colour'];  
    echo "ID ".$id."<br>";
    echo "Name ".$name."<br>";
    echo "Age ".$age."<br>";
    echo "Colour ".$colour."<br>";
    exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js">
</script>
</head>
<body>
    <table class = "table">
        <tr>
            <th> ID </th>
            <th> Name </th>
            <th> Age </th>
            <th> Colour </th>
            <th></th>
        </tr>
        <tr>
            <td class="column-data0">1</td>
            <td>
                <select class="column-data1" >
                    <option value="">Choose</option>
                    <option value = "John Brown" >John Brown</option>
                    <option value = "Mary Jones" >Mary Jones</option>
                    <option value = "Susan Smith" >Susan Smith</option>
                </select>
            </td>
            <td class="column-data2">12</td>
            <td class="column-data3">Black </td>
            <td><input type="button" value="Submit Data" class="continue" /></td>
        </tr>
        <tr>
            <td class="column-data0">2</td>
            <td>
                <select class="column-data1" >
                    <option value="">Choose</option>
                    <option value = "John Brown" >John Brown</option>
                    <option value = "Mary Jones" >Mary Jones</option>
                    <option value = "Susan Smith" >Susan Smith</option>
                </select>
            </td>
            <td class="column-data2">43</td>
            <td class="column-data3">Yellow </td>
            <td><input type="button" value="Submit Data" class="continue" /></td>
        </tr>
        <tr>
            <td class="column-data0">3</td>
            <td>
                <select class="column-data1" >
                    <option value="">Choose</option>
<?php
                    $sql3 = "SELECT * FROM names ORDER by name";
                    foreach ($mysqli->query($sql3) as $row3){
                        echo '<option value='.$row3["name"].'>'.$row3["name"]. '</option>';
                    }
?>
                </select>

            </td>
            <td class="column-data2">37</td>
            <td class="column-data3">Green </td>
            <td><input type="button" value="Submit Data" class="continue" /></td>
        </tr>
    </table>
    <script>
        $(document).ready(function(){
            $(".continue").click(function () {
                var row = $(this).closest("tr");
                var id = row.find(".column-data0").text();
                var name = row.find(".column-data1").val();
                var age = row.find(".column-data2").text();
                var colour = row.find(".column-data3").text();
                if(id!=""){
                    $.ajax({
                        type: "POST",
                        url: "<?php echo $_SERVER['PHP_SELF'];?>",
                        data: {id:id,name:name,age:age,colour:colour}, 
                        success: function(data){
                            number = data;
                            document.getElementById('name').innerHTML = number;
                            console.log(data);
                        }
                    });
                }
            });
        });
    </script>
<p id ="name"></p>
</body>
</html>

在表的前两行中，我手动填充下拉列表，它工作正常，但在第三行中，我正在从数据库中填充下拉列表，并且只返回名字。

我得到的结果是：

和

任何关于结果不同原因的帮助将不胜感激。

当我检查元素时，这就是我得到的

为什么它只捡起约翰而不捡起布朗？

javascript html jquery mysql

使用 jquery 获取从表中的数据库填充的下拉列表的值

Get the value of a dropdown populated from a database in a table using jquery

评论