Question

我有下面的代码，它将根据下拉列表更改图像

db中的图像存储为mypicture.jpg示例，所有指纹图像位于/images/thumbshots/

现在我们加载页面时会显示所选图像，但是当更改下拉列表时，图片不会显示我有 mydomain.com/mypicture.jpg代替mydomain.com/images/thumbshots/mypicture.jpg

我的代码到目前为止

 echo "<label for='image'>  Select Image File :</label>
 <select name='image' id='selectsrc' class='form-control'>
   <option value=''>Select Image </option>";
   foreach(glob(dirname(__FILE__) . '/images/thumbshots/*.{jpg,png,gif}', GLOB_BRACE) as $image_db){
       $image_db = basename($image_db);

          if($image == $image_db) {
 echo "<option value='" . $image_db . "' selected>".$image_db."</option>";
}
else
{
   echo "<option value='" . $image_db . "'>".$image_db."</option>";
}

   }

 echo "</select></div>";


 if ($image!='')
 {
 echo "<img src='images/thumbshots/$image' id='changesrc'>";
 }
 else
 {
 echo "<img src='".MY_URL."/images/blank.gif' id='changesrc'>";
 }
 ?>
<script type="text/javascript">
  var jQuery_1_9_1 =$.noConflict(true);
  </script> 

 <script>
   jQuery_1_9_1(document).ready(function() {
     jQuery_1_9_1('#selectsrc').change(function(){
         jQuery_1_9_1("#changesrc").attr('src',jQuery_1_9_1(this).val());
     });
   });
 </script>

我想我需要更改此代码，但我目前仍坚持使用..非常感谢任何输入..谢谢你

 <script>
   jQuery_1_9_1(document).ready(function() {
     jQuery_1_9_1('#selectsrc').change(function(){
         jQuery_1_9_1("#changesrc").attr('src',jQuery_1_9_1(this).val());
     });
   });
 </script>

Answer 1

由于您只获取图像名称，因此需要在名称前添加目录前缀。你不需要这么大的选择器jQuery_1_9_1你可以用简单的单字母。

OR

只需在选项值中添加完整路径，然后在这种情况下，您的代码就不需要任何前缀。

 <script>
     jQuery_1_9_1(document).ready(function() {
         jQuery_1_9_1('#selectsrc').change(function(){
                 var img_path = 'images/thumbshots/' + jQuery_1_9_1(this).val();
                 jQuery_1_9_1("#changesrc").attr('src', img_path);
             });
         });
</script>

使用jquery使用下拉列表从目录显示图像

1 个答案: