在下拉列表中更改图片javascript/jquery

我试图复制this simple example，但因为我的生活无法正常工作。第一张照片显示，但不会改变。原谅我，如果这是基本的，我很新的JavaScript。在下拉列表中更改图片javascript/jquery

<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>

来源

2015-04-04 pythonismyjam

您需要将您的代码：

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

否则你的代码不会工作。在的jsfiddle你可以在左边的JavaScript看到的是加载onDomready

来源

2015-04-04 20:10:04

啊啊，谢谢。 – pythonismyjam 2015-04-04 20:15:19

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

在的jsfiddle，你没有，因为它是动态的指定文件准备好功能。试试这个，它应该适合你。

来源

2015-04-04 20:15:07 user1012181

在下拉列表中更改图片javascript/jquery

回答

相关问题