AJAX를 사용하여 드롭 다운에서 이미지 변경

Question

여기에서 다른 드롭 다운 변경으로 인해 다른 드롭 다운의 결과가 "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 데이터를 반환하고 style_code jQuery가있는 자식을 생성하는 것입니다.

그것은 그런 일이 될 것입니다 :

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 & 자바 스크립트 :

... 

<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>