编辑 img 标签以匹配从 SQL 导入的 select 中的值

Question

I have a program which changes the value of options in a select based on another select. The values of the select are taken from a database which contains all the information needed. I want to change the image tag of my index.php page to match the link to an the selected image (stored in the database). I have tried and failed to change the img src to match the relevant link.

Does anyone know of any existing questions which may match what I need or even a way to do this? I will provide all the code used below.

---

index.php code:

<div class="">
        <label>Folder:</label>
        <select name="dir" id="dir">
            <option value=''>------- Select --------</option>
            <?php 
            $sql = "select * from `dir`";
            $res = mysqli_query($con, $sql);
            if(mysqli_num_rows($res) > 0) {
                while($row = mysqli_fetch_object($res)) {
                    echo "<option value='".$row->id."'>".$row->directory."</option>";
                }
            }
            ?>
        </select>

        <label>Image Number:</label>
        <select name="images" id="images"><option>------- Select --------</option></select>
    </div>

    <img id="img" src=""/>

---

js.js code:

$(document).ready(function() {
    $("#dir").change(function() {
        var image_id = $(this).val();
        if(image_id != "") {
            $.ajax({
                url:"get-folders.php",
                data:{c_id:image_id},
                type:'POST',
                success:function(response) {
                    var resp = $.trim(response);
                    $("#images").html(resp);
                }
            });
        } else {
            $("#images").html("<option value=''>------- Select --------</option>");
        }
    });
});

---

get-folders.php code:

<?php include("db.php"); ?>
<?php
if(isset($_POST['c_id'])) {
    $sql = "select * from `images` where `image_id`=".mysqli_real_escape_string($con, $_POST['c_id']);
    $res = mysqli_query($con, $sql);
    if(mysqli_num_rows($res) > 0) {
        echo "<option value=''>------- Select --------</option>";
        while($row = mysqli_fetch_object($res)) {
            echo "<option value='".$row->id."'>".$row->name."</option>";
        }
    }
} else {
    header('location: ./');
}
?>

Answer 1

You need to store the url of the image in the options like this:

echo "<option value='".$row->id."' data-src='".$row->url."'>".$row->name."</option>";//data-src is custom attribute

Then you can access the data-src attribute with jQuery:s data method(add this to your document.ready function after the dir change callback):

$("#images").change(function() {
    $('#img').prop('src',$('#images option:selected').data('src'));// add this to top of your change function for the images select box
});