Question

我创建了一个select选项，并使用数据库中的mysqli查询填充它。但是下拉菜单中的正确选项下面有空白选项。这是我的php页面，带有select选项：

<!DOCTYPE html>
<!DOCTYPE html>
<?php 
    include("includes/connect.php");
    function getcats_add_products(){
        global $con;
        $get_cats="select * from categories";
        $run_cats=mysqli_query($con, $get_cats);                   
        echo "<option>Select Category</option>";

        while($row_cats = mysqli_fetch_array($run_cats)){
            $cat_id = $row_cats['cat_id'];
            $cat_title = $row_cats['cat_title'];
            echo "<option value='$cat_id'>$cat_id, $cat_title<option>";
        }
    }
?>
<html>
<head>
    <title>Admin Panel - Add Products</title>
    <link rel="stylesheet" type="text/css" href="styles/admin-style.css">
</head>
<body>
    <header class="header">

    </header>
    <div class="heading">Add New Product</div>
    <div class="product-table-div">
        <form>
            <table class="product-table">
                <tr>
                    <td>Product Category</td>
                    <td>
                        <select id="product-table-input" >
                            <?php getcats_add_products(); ?>
                        </select>
                    </td>
                </tr>    
                <tr>    
                    <td>Product Brand</td>
                    <td>
                        <input type="" name="" id="product-table-input">
                    </td>
                </tr>    
                <tr>
                    <td>Product title</td>
                    <td>
                        <input type="" name="" id="product-table-input">
                    </td>
                </tr>    
                <tr>
                    <td>Product Price</td>
                    <td>
                        <input type="" name="" id="product-table-input">
                    </td>
                </tr>    
                <tr>
                    <td>Product description</td>
                    <td>
                        <input type="" name="" id="product-table-input">
                    </td>
                </tr>    
                <tr>
                    <td>Product image</td>
                    <td>
                        <input type="" name="" id="product-table-input">
                    </td>
                </tr>    
                <tr>
                    <td>Product Keywords</td>
                    <td>
                        <input type="" name="" id="product-table-input">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="product-submit-div">
                            <input type="submit" name="submit" id="product-submit" value="Add">
                        </div>
                    </td>
                </tr>
            </table>`enter code here`
        </form>
    </div>
    <?php getcats_add_products(); ?>
</body>
</html>

这是css文件：

header {
    height: 100px;
    background: #006b00; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#006b00, #00fa00); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#006b00, #00fa00); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#006b00, #00fa00); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#006b00, #00fa00);
}

.heading {
    margin: 20px;
    text-align: center;
    width: 100%;
    color: #001A00;
    font-size: 25px;
    font-weight: bold;
}

.product-table-div {
    width: fit-content;
    margin: auto;
    display: block;

}

.product-table {
    table-layout: auto;
    height: auto;
    background-color: #00CC8A;
}

.product-table td {
    font-size: 20px;
    text-align: left;
}

#product-submit-div {
    text-align: center;
    max-width: 100%;
}

#product-submit {
    border: 0px;
    height: 100%;
    width: 30%;
    line-height: 20px;
    font-size: 20px;
    border-radius: 3px;
}

这是我的连接页面：

<?php 
    $con = mysqli_connect("localhost", "root", "root", "ecommerce");
        if(!$con){
        die('connection error: '.$mysqli->connect_error());
    }
?>

这是填充数据时选择选项的方式： Select options followed by spaces

这是我要查询的表格： Database table

我无法确定它是否是mysql问题或css问题。空格不在第一个标签和第二个标签之间。只有我从数据库中提取的标签后面有空白选项。

Answer 1

您缺少结束标记，因此，每个选项后都会有额外的空格。

echo "<option value='".$cat_id."'>".$cat_title."</option>";

这就是为什么你在每个选择选项后获得空行的原因。

Answer 2

您已经添加了两次HTML文档的开头，并且不建议这样做，您必须从代码中删除它。

删除已添加<!DOCTYPE html>

的两次

未在选择标记中显示选项的原因：

您没有在已添加到select标记的回显上正确连接字符串。因此，您的选择标记不会在选项值中显示任何值，您需要更改这样的整个函数，以便将值显示在选项标记上。

您可以使用mysqli_fetch_array()而不是使用mysqli_fetch_assoc()，而是可以在while循环中一次获取单行，以便您可以根据需要修改数据。与mysqli_fetch_array()。
一样，您需要遵循相同的内容

mysqli_fetch_array() - 方法

PHP代码：

<?php 
    include("includes/connect.php");
    function getcats_add_products(){
        global $con;
        $get_cats="select * from categories";
        $run_cats=mysqli_query($con, $get_cats);                   
        echo "<option>Select Category</option>";

        while($row_cats = mysqli_fetch_array($run_cats)){
            $cat_id = $row_cats['cat_id'];
            $cat_title = $row_cats['cat_title'];
            echo "<option value=".$cat_id.">".$cat_title."<option>";
        }
    }
?>

mysqli_fetch_assoc() - 方法

PHP代码：

<?php 
    include("includes/connect.php");
    function getcats_add_products(){
        global $con;
        $get_cats="select * from categories";
        $run_cats=mysqli_query($con, $get_cats);                   
        echo "<option>Select Category</option>";

        while($row_cats = mysqli_fetch_assoc($run_cats)){
            $cat_id = $row_cats['cat_id'];
            $cat_title = $row_cats['cat_title'];
            echo "<option value=".$cat_id.">".$cat_title."<option>";
        }
    }
?>

注意：两者都将跟进循环结构的相同方法，以便您可以决定使用哪一个，并且两者都与显示输出时看到的相同。

但是在上面的代码中可以看到串联是如何完成的，你必须单独这样做。

在默认情况下，您必须在选项值中传递ID或值，然后在选项外部值中再传递一个参数。

<强>替换

echo "<option value='$cat_id'>$cat_id, $cat_title<option>";

。通过

echo "<option value=".$cat_id.">".$cat_title."<option>";

希望我的解释清楚，你可以纠正它以备将来使用。

快乐编码：）

html中正确选项后面的空白选项选择

2 个答案: