Блог

Я создал PHP-файл, который создает выпадающий список из таблицы MySQL. При выборе я хочу, чтобы каждая запись в выпадающем списке изменяла изображение, отображаемое на странице. Я могу отобразить последнее изображение в выпадающем списке, но не могу заставить его измениться после этого.

Нужно ли мне отображать часть изображения с помощью javascript??

Любая полученная помощь (с примером кода, если возможно)

С уважением, Иэн

 <script  language=”Javascript”>

 function setImage(select){
     var image = document.getElementsByName("image-swap")[0];
     image.src = select.options[select.selectedIndex].value;
 }  

 </script>
  

  <?php
 $servername = "localhost";
 $username   = "xxxx";
 $password   = "xxxxxx";
 $dbname     = "xxxxxx";

 // Create connection
 $conn = new mysqli($servername, $username, $password, $dbname);
 // Check connection
 if ($conn->connect_error) {
       die("Connection failed: " . $conn->connect_error);
 } 

   // Select all data:

   echo "All Tartans:<br><br>";

  $sql = "SELECT ID, TartanID, Clan, Variation, Manufacturer, Supplement, SupplementVAT, ImagePath FROM Tartan";
  $result = $conn->query($sql);

   if ($result->num_rows > 0) 
   {
        // output data of each row into dropdown list
    ?>
       <select name="Tartan" id="Tartan" onchange="setImage(this);")
        <?php


         while($row = $result->fetch_assoc()) 
     {
          echo "ID: " . $row["ID"]. "<br>" . 
       "TartanID: " . $row["TartanID"]. "<br>" . 
       "Clan: " . $row["Clan"]. "<br>" . 
       "Variation: " . $row["Variation"]. "<br>" . 
       "Manufacturer: " . $row["Manufacturer"]. "<br>" . 
       "Supplement: " . $row["Supplement"]. "<br>" . 
       "SupplementVAT: " . $row["SupplementVAT"]. "<br>" . 
       "ImagePath: " . $row["ImagePath"]. "<br>"; 

    $clan = $row["Clan"];
    $img_path = $row["ImagePath"];

    echo "<option value='$Clan' >$clan</option>";

     }
   ?>
        </select>


    <!-- Display Image here -->


<div class="img-block">
    <img src="<?php echo $img_path; ?>" 
         name="image-swap" 
         alt="<?php echo $clan; ?>" 
         title="<?php echo $clan; ?>" 
         width="200" 
         height="200" class="img-responsive" />

</div>
<?php   

 }  
 else 
 {
     echo "0 results";
  }
   echo "<br>";

     $conn->close();
   ?>