使用 AJAX 从下拉菜单更改图像

Question

在这里，我有一个下拉菜单，在该下拉菜单上选择其他下拉更改会导致其他下拉列表的 id 是“style_code”。现在我还想在下拉选择中更改图像，就像当我从下拉列表中选择颜色时，它会更改其他下拉列表的大小，但我也想在颜色选择中更改图像。

<script>
    function getState(val) {
        $.ajax({
            type: "POST",
            url: "check.php",
            data:'id='+val,
            success: function(data){
                $("#style_code").html(data);
            }
        });
    }
</script>

这里是check.php

<?php 

$con=mysqli_connect("localhost","root","","db") or die(mysql_error());

if(!empty($_POST["id"])) {
    $query ="SELECT * FROM stylecolor WHERE color_code = '" . $_POST["id"] . "'";
    $results = mysqli_query($con,$query);

    while ( ($row=mysqli_fetch_array($results))){?>
        <option value="<?php echo $row["color_name"]; ?>">
            <?php echo $row['size'] ; ?>
        </option>
<?php
    }
}
?>

Answer 1

您的困难来自于您从 PHP 脚本返回 HTML 代码这一事实。我的建议是返回 JSON 数据，然后使用 jQuery 生成 style_code 子级。

应该是这样的：

check.php

<?php 

$con = mysqli_connect("localhost", "root", "", "db") or die(mysql_error());

if(!empty($_POST["id"])) {
    $query = "SELECT * FROM stylecolor WHERE color_code = '" . $_POST["id"] . "'";
    $results = mysqli_query($con, $query);

    $data = new stdClass(); // This object will carry the results

    while (($row = mysqli_fetch_object($results))) {
        $data->option[] = $row;
    }

    // Another query to get the image name
    $query = "SELECT name FROM image_name WHERE color_code = '" . $_POST["id"] . "'";
    $results = mysqli_query($con, $query);

    if ($row = mysqli_fetch_object($results)) {
        $data->image_name = $row->name;
    }

    header('Content-Type: application/json');
    echo json_encode($data);

}

HTML 和 Javascript：

...

<div class="thumb-image" id="style_image" >
    <img src="images/<?php echo $productimg1?>" data-imagezoom="true" class="img-responsive" alt="" />
</div>

...

<script language="javascript">
function getState(val) {
    $.ajax({
        type: "POST",
        url: "check.php",
        data: {id: val},
        dataType:'json',
        success: function(data) {
            $("#style_code").children().remove(); // empty the dropdown
            // Add new options in the dropdown from the result data
            data.option.forEach(function (item) {
                $("#style_code").append('<option value="' + item.color_name + '">' + item.size + '</option>');
            });
            // Change the 'src' attribute of the <img>
            $("#style_image").find('img').attr('src', 'images/' + data.image_name + '?d=' + Date.now().toString());
        }
    });
}
</script>