Question

我正在尝试复制this simple example但是因为我的生活无法让它发挥作用。第一张图片显示，但它不会改变。请原谅我，如果这是基本的，我对javascript很新。

<html>
<head>
    <script src="/js/jquery-1.11.2.js"></script>
    <script type="text/javascript">
    var pictureList = [
        "http://lorempixel.com/400/200/sports/1",
        "http://lorempixel.com/400/200/sports/2",
        "http://lorempixel.com/400/200/sports/3",
        "http://lorempixel.com/400/200/sports/4",
        "http://lorempixel.com/400/200/sports/5", ];

    $('#picDD').change(function () {
        var val = parseInt($('#picDD').val());
        $('img').attr("src",pictureList[val]);
    });

    </script>
</head>
<body>
    <img src="http://lorempixel.com/400/200/sports/1" />
    <select id="picDD">
        <option value="1" selected>Picute 1</option>
        <option value="2">Picute 2</option>
        <option value="3">Picute 3</option>
        <option value="4">Picute 4</option>
        <option value="5">Picute 5</option>
    </select>
</body>
</html>

Answer 1

您需要将代码放在：

 // A $( document ).ready() block.
 $( document ).ready(function() {
    // Your code here.
 });

否则你的代码不会工作。在jsfiddle中，您可以在左侧看到javascript已加载到Domready

Answer 2

 $( document ).ready(function() {
    $('#picDD').change(function () {
        var val = parseInt($('#picDD').val());
        $('img').attr("src",pictureList[val]);
    });
});

在jsFiddle中，您不必指定文档就绪功能，因为它是动态完成的。试试这个，它应该适合你。

在下拉列表javascript / jquery上更改图像

2 个答案: