Question

Hello Stackers，

我对jQuery有疑问。我有以下代码，如果我选择其中一个选项，我想要Image SRC更改为该路径。（直接，没有任何其他点击）。这可能吗？（这是所选图像的一种实时预览）我试过，但它似乎没有用。

表单和图片显示

 <b>Afbeelding</b><br><select name="choose" id="choose">
                 <?php
                 if ($handle = opendir('C:/inetpub/wwwroot/magieweb/images/news'))
    {   
        while (false !== ($file = readdir($handle)))
        {
            if ($file == '.' || $file == '..')
            {
                continue;
            }   

            echo '<option value="' . $file . '"';

            if (isset($_POST['topstory']) && $_POST['topstory'] == $file)
            {
                echo ' selected';
            }

            echo '>' . $file . '</option>';
        }
    }
    ?>
                   </select><br><br>

                    <ul style="border: 1px solid #2087A1; list-style-type: none; margin-right:40px; min-height:30px;">
            <li><strong style="color:#2087A1; margin-top:3px; margin-bottom:3px;">Nieuwsafbeelding Preview</strong></li>    
            <li><img id="blah" src=""></li>

         </ul><br><br>

我的jQuery

$('#choose').change(function(){
           $('#blah').attr('src', this.value);
            alert(this.value);
        });

先谢谢

Answer 1

已更新：在更改时从选择框中检索所选选项值。

$('#my_select_box').change(function(){
	$('#my_changing_image').attr('src', $('#my_select_box').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my_select_box">
<option value="http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">something</option>
<option value="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg">something else</option>
</select>

<img id="my_changing_image" src="http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg" />

https://jsfiddle.net/hqk1r8fk/1/

SELECT更改时jQuery更改图像

1 个答案: