php - 选择列表下移

Question

我正在开发一个带有包含图像的选择列表的网页。我已经有了这个：

当我在列表中选择图像名称时，图像将显示在下面的 div 中。

<?php 
   // Create connection
   $con=mysqli_connect("******","***","***","charts");

   // Check connection
   if (mysqli_connect_errno($con))
   {
       echo "Failed to connect to MySQL: " . mysqli_connect_error();
   }
?>

<form method="post" action="index.php" id="nano" name="nano">
  <p>
  <select name="SelectBox" id="SelectBox"  onchange="this.form.submit()">
    <?php if($_POST['submitted'] == true){ ?>
    <?php 
    $result = mysqli_query($con,"SELECT * FROM Nano WHERE IMAGE_NAME ='". $_POST['SelectBox']."'");
    while($row = mysqli_fetch_array($result))
    { ?> 
    <option selected="selected" value="<?php  echo $row['IMAGE_NAME'] ?>">
      <?php  echo $row['IMAGE_PARAMETER'] ?>
      </option>
    <?php } ?>

    <?php echo $_POST['SelectBox']; ?></option>
    <?php } else{ ?>

    <?php 
        $result = mysqli_query($con,"SELECT TOP * FROM Nano");
        while($row = mysqli_fetch_array($result))
        {
    ?> 
    <option selected="selected" value="<?php  echo $row['IMAGE_NAME'] ?>">
      <?php  echo $row['IMAGE_PARAMETER'] ?>
          </option>
      <?php  
          $var1 = $row['IMAGE_NAME']; ?>
      <?php
    }
    ?>

    <?php } ?>
    <option value="" disabled="disabled"> -------- </option>
    <?php

$result = mysqli_query($con,"SELECT * FROM Nano");

while($row = mysqli_fetch_array($result))
  { $values[] =  $row['IMAGE_NAME'];

?>
    <option value="<?php  echo $row['IMAGE_NAME'] ?>">
      <?php  echo $row['IMAGE_PARAMETER'] ?>
      </option>
    <?php }?>
  </select>
  <input type="hidden" name="submitted" id="submitted" value="true" />
  </p>
<?php if($_POST['submitted'] == true){ ?>
  <p><img src="Images\Nano\<?php echo $_POST['SelectBox']?>" width="953" height="600" /></p>
<?php }else { ?>
<p><img src="Images\Nano\<?php print_r($values[0]) ?>" width="953" height="600" /></p>
<?php  } mysqli_close($con);?>
</form>
</div>   

我希望当我在选择列表中向下移动时图片会改变，而不是当我在选择列表中单击它时。

Answer 1

在您的情况下，您必须将hover事件绑定到，但是没有办法使用本机控制option来做您想做的事情。仅当您单击与以前select不同的选项时，本机选项才会回答。option

但是，您可以select使用 html&css&js 模拟控件，这样当您的光标向下移动模拟的option（可能是 div 或其他东西）时，您可以将事件处理程序绑定到它并显示名称。